{"componentChunkName":"component---src-templates-post-js","path":"/blog/full-stack","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🚀 全栈=全干","tips":[],"categories":["code"],"datetime":"2019-09-28 09:39:01","noFooter":false,"description":"全栈=全干，一个在前后端都有生产能力、各类技术都有涉猎的工种，一般顶着这个头衔表示团队多面手、救火队员、项目全包的瑞士军刀，在一线岗位发扬不怕苦不怕累、哪里需要哪里搬的精神，广受小公司、创业公司的欢迎。","plainTextDescription":"全栈=全干，一个在前后端都有生产能力、各类技术都有涉猎的工种，一般顶着这个头衔表示团队多面手、救火队员、项目全包的瑞士军刀，在一线岗位发扬不怕苦不怕累、哪里需要哪里搬的精神，广受小公司、创业公司的欢迎。\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='92'%3e%3cpath%20d='M0%2015l1%2016v1L0%2061c0%2027%200%2029%202%2028l8-1-6%202c-4%202-4%202%2010%202l14-1%201-2c0-2-1-2-9-2-5%200-8%200-7-1v-3l-1-1c1-1%2022-2%2024%200s12%201%2026%200c7-1%207-2%206-4-1-1-1-1-3%201-1%201-2%201-2-2l-2-7c-2-2-2-4%201-5l1-3-1-2-2-1c-2-1-2-1%201-1%205%200%207-3%209-10%201-6%205-9%208-5%200%201%202%202%205%202%205%200%209%202%2014%207%204%204%204%204%202%203-3%200-3%202%200%205%201%202%206%203%205%201-1-1%201-5%202-5l3-2%204-2%204-2%205-3c3-1%204-3%201-2l-1-3%202-3v2l1%202%202%201c2%201%202%201%203-2%202-3%203-2%202%203%200%202%204%204%205%203l4-1%203-1%204-2%206-3c2-1%202-1%200-3h-4l-5-1c-2-1-5-2-6-1l-3-1-3-5-3-4%202-2%203-4%201-2v-3c0-2-1-2-2%202-2%204-2%204-3%202l4-10%204-9H0v15M298%201c0%202%202%209%205%2011%202%203%201%203-2%201s-4-3-5-1l-5-1c-3-2-4-2-5-1-3%204-3%205-4%203%200-2-2-1-6%202-7%204-13%2016-9%2018l1%205c1%204%203%206%203%203h1l5%202c3%200%204%200%204-2h1c2%203%203%202%202%200v-2l1-1v-3h5c-1%201%202%201%206%201l7%201h-15l5%202c5%201%205%201%202%201l-4%202c-1%202-1%204%201%204l2%202h4c0%201%201%202%203%202%202-1%204%200%204%201h3c0-3%203-1%204%201%200%202%200%202%202%201%201-1%201-1%201%201%200%204%203%205%206%202l5-1c5%201%206%202%203%202l-3%201h3c3%200%203%202%200%202-2%201-2%201%200%202l1%201%201%202%202%203c-1%200-5-2-4-3l-1-1c-1%201-5%200-7-3-2-2-3-1-3%202l2%202%201%202%201%201%204%202%203%201h2c0%202%202%201%202-1l1-2c2%200%201%206-1%207l-2%201h2l4%201%203%202%203%201%206%201c5%200%206%200%206-2s0-2%202-1l4%202c2%200%202%200%201%201s-1%201%201%201l3-1h1l1%201%201-2%201-3c1%200%205%203%204%204l-2-1-2-1%201%202%208%202%207%201-1%201c-5-1-23%200-23%201l7%201c7-1%209%200%204%201l-6%202-4%202h9c9%200%2010%200%2010-2l2-3c2-1%202-1%202%202l-1%203h8c7%200%207%200%207-2l-1-3v-1l1-44V0h-51l-51%201M19%2045c-2%202-2%202-3%201-2-3-4-2-4%202%200%202%200%202%205%202%207%201%2011%202%2014%207l4%203v2l1%202v1l1-2h8l4-1c4-1%204-3%200-4l-3-2%202-2c4-3%204-4%201-3l-3-1-1-1-2%201c0%202-2%201-3-1l-1-1-1%202c1%201-1%202-2%200h-1l-1-1-1-1-3-2c-4-4-8-5-11-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/0979f/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/9e575/banner.jpg 500w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/79449/banner.jpg 1000w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/0979f/banner.jpg 1920w","srcWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/14e3c/banner.webp","srcSetWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/7fe04/banner.webp 500w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/d619e/banner.webp 1000w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/14e3c/banner.webp 1920w","sizes":"(max-width: 1920px) 100vw, 1920px"}}},"bannerCredit":null,"slug":"/blog/full-stack","tags":["思考","协作","技巧"]},"headings":[{"value":"全栈和技术无关","depth":2},{"value":"能够全栈，但不是全栈工程师","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"full-stack\",\n \"title\": \"🚀 全栈=全干\",\n \"date\": \"2019-09-28 09:39:01\",\n \"author\": \"Ubug\",\n \"description\": \"全栈=全干，一个在前后端都有生产能力、各类技术都有涉猎的工种，一般顶着这个头衔表示团队多面手、救火队员、项目全包的瑞士军刀，在一线岗位发扬不怕苦不怕累、哪里需要哪里搬的精神，广受小公司、创业公司的欢迎。\",\n \"categories\": [\"code\"],\n \"tags\": [\"思考\", \"协作\", \"技巧\"],\n \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u81EA\\u5DF1\\u5BF9\\u5168\\u6808\\u7684\\u60F3\\u6CD5\\uFF0C\\u4ECE\\u81EA\\u8C6A\\u7684\\u81EA\\u79F0\\u4E3A\\u5168\\u6808\\uFF0C\\u5230\\u73B0\\u5728\\u61C2\\u5F97\\u672F\\u4E1A\\u6709\\u4E13\\u653B\\uFF0C\\u5168\\u6808\\u662F\\u4E2A\\u804C\\u4E1A\\uFF0C\\u4E0D\\u80FD\\u968F\\u4FBF\\u53EB\\u81EA\\u5DF1\\u5168\\u6808\\u5F00\\u53D1\\u5DE5\\u7A0B\\u5E08\\uFF0C\\u5BF9\\u804C\\u4E1A\\u672C\\u8EAB\\u8D1F\\u8D23\\uFF0C\\u80FD\\u529B\\u5E7F\\u6CDB\\u3001\\u5174\\u8DA3\\u5BBD\\u5E7F\\u3001\\u61C2\\u5F97\\u5F88\\u591A\\uFF0C\\u4E5F\\u53EA\\u80FD\\u662F\\u6211\\u81EA\\u5DF1\\u9879\\u76EE\\u7684\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\u3002\")), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"Just do whatever it takes to make it work.\")), mdx(\"h2\", null, \"\\u5168\\u6808\\u548C\\u6280\\u672F\\u65E0\\u5173\"), mdx(\"p\", null, \"\\u5E73\\u5FC3\\u800C\\u8BBA\\u4E00\\u4E2A\\u6709\\u81EA\\u6211\\u4FEE\\u517B\\u7684\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\uFF0C\\u5185\\u5FC3\\u5176\\u5B9E\\u6709\\u53D1\\u73B0\\u9700\\u6C42\\u7684\\u55C5\\u89C9\\u3001\\u6709\\u505A\\u4EA7\\u54C1\\u7684\\u5FC3\\u601D\\u3001\\u6709\\u8BBE\\u8BA1\\u89E3\\u51B3\\u65B9\\u6848\\u7684\\u80FD\\u529B\\u3001\\u6709\\u5F88\\u5F3A\\u7684\\u5B66\\u4E60\\u80FD\\u529B\\uFF0C\\u80FD\\u591F\\u4E3A\\u4E86\\u5B9E\\u73B0\\u76EE\\u6807\\u53BB\\u638C\\u63E1\\u4EFB\\u4F55\\u6240\\u5FC5\\u987B\\u7684\\u6280\\u672F\\u6808\\uFF0C\\u6240\\u4EE5\\u4E00\\u4E2A\\u5168\\u6808\\u5185\\u5FC3\\u66F4\\u613F\\u610F\\u81EA\\u79F0\\u662F \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"[\\u5BF9\\u80FD\\u591F\\u89E3\\u51B3\\u95EE\\u9898\\u7684\\u4EFB\\u4F55\\u6280\\u672F\\u611F\\u5174\\u8DA3\\u7684\\u4EBA]\"), \"\\u3002\"), mdx(\"p\", null, \"\\u5F88\\u5C11\\u4EBA\\u53EF\\u4EE5\\u5BF9\\u5168\\u90E8\\u6280\\u672F\\u6808\\u90FD\\u6709\\u975E\\u5E38\\u6DF1\\u7684\\u7406\\u89E3\\uFF0C\\u6BD5\\u7ADF\\u786E\\u5B9E\\u975E\\u5E38\\u56F0\\u96BE\\uFF0C\\u751A\\u81F3\\u9700\\u8981\\u5728\\u4E1A\\u52A1\\u5C42\\u9762\\u6DF1\\u8015\\u5F88\\u4E45\\u624D\\u80FD\\u5BF9\\u6280\\u672F\\u6808\\u7406\\u89E3\\u6DF1\\u5165\\u3002\\u4F46\\u662F\\u5168\\u6808\\u6240\\u8FFD\\u6C42\\u7684\\uFF0C\\u662F\\u4E3A\\u4E86\\u65E0\\u8BBA\\u5982\\u4F55\\u90FD\\u8981\\u89E3\\u51B3\\u95EE\\u9898\\u7684\\u6001\\u5EA6\\uFF0C\\u6709\\u8DB3\\u591F\\u7684\\u5174\\u8DA3\\u9A71\\u4F7F\\u53BB\\u5B66\\u4E60\\u65B0\\u7684\\u9886\\u57DF\\uFF0C\\u8FC8\\u51FA\\u8212\\u9002\\u533A\\u7684\\u95E8\\u69DB\\uFF0C\\u5373\\u4F7F\\u5F88\\u7B28\\u62D9\\u7684\\u5B9E\\u73B0\\u4E5F\\u80FD\\u5B8C\\u6210\\u9047\\u5230\\u7684\\u9700\\u6C42\\u3002\"), mdx(\"p\", null, \"\\u8BF4\\u767D\\u4E86\\uFF0C\\u6254\\u7ED9\\u4E00\\u4E2A\\u5168\\u6808\\u4E00\\u4E2A\\u95EE\\u9898\\uFF0C\\u4ED6\\u5C31\\u80FD\\u81EA\\u5DF1\\u4ECE\\u5206\\u6790\\u9700\\u6C42\\u3001\\u8BBE\\u8BA1\\u4EA7\\u54C1\\u5230\\u8BBE\\u8BA1\\u754C\\u9762\\u3001\\u5B8C\\u6210\\u4EA7\\u54C1\\uFF0C\\u72EC\\u7ACB\\u8D1F\\u8D23\\u6240\\u6709\\u6280\\u672F\\u6808\\uFF0C\\u5373\\u4F7F\\u5E76\\u4E0D\\u80FD\\u5728\\u6BCF\\u4E00\\u65B9\\u9762\\u90FD\\u505A\\u7684\\u5F88\\u597D\\u3002\"), mdx(\"p\", null, \"\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\u5728\\u5982\\u4ECA\\u7684 IT \\u9886\\u57DF\\u7EC6\\u5206\\u5E02\\u573A\\uFF0C\\u5927\\u90E8\\u5206\\u662F\\u627F\\u62C5\\u5927\\u524D\\u7AEF\\u548C\\u540E\\u7AEF\\u4E1A\\u52A1\\u7684\\u5C97\\u4F4D\\uFF0C\\u5305\\u62EC\\u7528\\u6237\\u754C\\u9762\\uFF08Web\\u3001App\\uFF09\\u3001\\u540E\\u53F0\\u63A5\\u53E3\\u548C\\u6570\\u636E\\u5904\\u7406\\u7B49\\u6D41\\u7A0B\\u90FD\\u5728\\u6280\\u672F\\u6808\\u8303\\u56F4\\u5185\\uFF0C\\u4E1A\\u52A1\\u5E7F\\u5EA6\\u80FD\\u591F\\u8986\\u76D6\\u5B8C\\u6574\\u7684\\u4E00\\u4E2A\\u4EA7\\u54C1\\u3002\"), mdx(\"p\", null, \"\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\u5174\\u8D77\\u4E00\\u65B9\\u9762\\u662F\\u56E0\\u4E3A\\u5DE5\\u7A0B\\u5E08\\u5929\\u751F\\u5BF9\\u6280\\u672F\\u5E7F\\u5EA6\\u7684\\u62D3\\u5C55\\uFF0C\\u4F46\\u662F\\u53E6\\u4E00\\u65B9\\u9762\\u662F\\u521B\\u4E1A\\u516C\\u53F8\\u3001\\u5C0F\\u516C\\u53F8\\u7684\\u4E00\\u4E9B\\u4E2D\\u5C0F\\u578B\\u9879\\u76EE\\uFF0C\\u4E00\\u4E2A\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\u76F8\\u6BD4\\u5DE5\\u79CD\\u9F50\\u5168\\u7684\\u56E2\\u961F\\u6027\\u4EF7\\u6BD4\\u9AD8\\u7684\\u592A\\u591A\\u3002\\u6BD5\\u7ADF\\u6CA1\\u6709\\u90A3\\u4E48\\u4E25\\u82DB\\u7684\\u4EA7\\u54C1\\u9700\\u6C42\\u7684\\u80CC\\u666F\\u4E0B\\uFF0C\\u5F88\\u5C0F\\u7684\\u5F00\\u53D1\\u5468\\u671F\\uFF0C\\u51E0\\u4E4E\\u6CA1\\u6709\\u7684\\u6C9F\\u901A\\u6210\\u672C\\uFF0C\\u4F7F\\u7528\\u5168\\u6D41\\u7A0B\\u6280\\u672F\\u6808\\u5B8C\\u6210\\u76EE\\u6807\\u4EFB\\u52A1\\uFF0C\\u80FD\\u591F\\u6309\\u65F6\\u4E0A\\u7EBF\\u6EE1\\u8DB3\\u4F7F\\u7528\\u5BF9\\u5C0F\\u56E2\\u961F\\u3001\\u5C0F\\u516C\\u53F8\\u662F\\u5F88\\u91CD\\u8981\\u7684\\u3002\"), mdx(\"p\", null, \"\\u5F53\\u7136\\u5168\\u6808\\u5BF9\\u4E8E\\u6280\\u672F\\u4EBA\\u672C\\u8EAB\\u6765\\u8BF4\\uFF0C\\u592A\\u8FC7\\u4E8E\\u6D89\\u53CA\\u6280\\u672F\\u5E7F\\u5EA6\\uFF0C\\u56EB\\u56F5\\u541E\\u67A3\\u4F3C\\u7684\\u6F2B\\u65E0\\u76EE\\u7684\\u4E5F\\u6CA1\\u6709\\u4EFB\\u4F55\\u610F\\u4E49\\uFF0C\\u8FD9\\u4E9B\\u6280\\u672F\\u6808\\u7684\\u70B9\\u6570\\u5206\\u914D\\u8FD8\\u662F\\u6839\\u636E\\u505A\\u7684\\u4E8B\\u60C5\\u6765\\u8003\\u8651\\uFF0C\\u6F2B\\u65E0\\u76EE\\u7684\\u7684\\u4E71\\u5B66\\u4E0D\\u662F\\u5168\\u6808\\u7684\\u672C\\u610F\\uFF0C\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u6574\\u4E2A\\u77E5\\u8BC6\\u4F53\\u7CFB\\u548C\\u6280\\u80FD\\u56FE\\u7684\\u7EF4\\u62A4\\u662F\\u4E00\\u4E2A\\u5DE5\\u7A0B\\u5E08\\u4EF7\\u503C\\u6700\\u5927\\u5316\\u7684\\u5173\\u952E\"), \"\\u3002\"), mdx(\"h2\", null, \"\\u80FD\\u591F\\u5168\\u6808\\uFF0C\\u4F46\\u4E0D\\u662F\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\"), mdx(\"p\", null, \"\\u53EF\\u662F\\uFF0C\\u7231\\u597D\\u5F88\\u5E7F\\u6CDB\\uFF0C\\u4F46\\u662F\\u5174\\u8DA3\\u6709\\u5927\\u5C0F\\uFF0C\\u4ECE\\u7B2C\\u4E00\\u884C\\u4EE3\\u7801\\u5230\\u73B0\\u5728\\u6240\\u77E5\\u9053\\u7684\\u6280\\u672F\\u6808\\u786E\\u5B9E\\u53EF\\u4EE5\\u88AB\\u79F0\\u4E3A\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\uFF0C\\u6280\\u672F\\u4E0A\\u80FD\\u591F\\u7528\\u5F88\\u591A\\u80FD\\u529B\\u505A\\u670D\\u52A1\\u5668\\u642D\\u5EFA\\u548C\\u7EF4\\u62A4\\u3001\\u6570\\u636E\\u5E93\\u67E5\\u8BE2\\u3001\\u540E\\u53F0\\u63A5\\u53E3\\uFF0C\\u80FD\\u591F\\u7528\\u5F88\\u591A\\u8BED\\u8A00\\u505A\\u5305\\u62EC\\u547D\\u4EE4\\u884C\\u3001Web\\u3001Flutter\\u3001Android\\u3001IOS\\u3001\\u5C0F\\u7A0B\\u5E8F\\uFF0C\\u80FD\\u591F\\u505A\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u3001\\u9700\\u6C42\\u754C\\u9762\\u8BBE\\u8BA1\\u751A\\u81F3\\u89C6\\u9891\\u6F14\\u793A\\u5236\\u4F5C\\uFF0C\\u4F46\\u662F\\u6211\\u5374\\u4E0D\\u559C\\u6B22\\u8FD9\\u4E2A\\u5934\\u8854\\u3002\"), mdx(\"p\", null, \"\\u5168\\u6808\\u4E4B\\u4E8E\\u6211\\u81EA\\u5DF1\\uFF0C\\u613F\\u610F\\u4E3A\\u4E86\\u81EA\\u5DF1\\u7684\\u5C0F\\u60F3\\u6CD5\\u5C0F\\u9879\\u76EE\\u82B1\\u65F6\\u95F4\\u53BB\\u7814\\u7A76\\uFF0C\\u613F\\u610F\\u4E3A\\u4E86\\u6539\\u8FDB\\u81EA\\u5DF1\\u9879\\u76EE\\u7684\\u4E00\\u4E2A\\u5C0F\\u529F\\u80FD\\u7206\\u809D\\uFF0C\\u4E5F\\u613F\\u610F\\u7ED9\\u81EA\\u5DF1\\u7684\\u9879\\u76EE\\u914D\\u9F50\\u5404\\u4E2A\\u7AEF\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u5728\\u516C\\u53F8\\u662F\\u4E00\\u4E2A\\u4E25\\u8083\\u6CA1\\u90A3\\u4E48\\u9E21\\u8840\\u7684\\u5730\\u65B9\\uFF0C\\u6BCF\\u4E2A\\u5DE5\\u7A0B\\u5E08\\u9700\\u8981\\u4E3A\\u81EA\\u5DF1\\u7684\\u8F93\\u51FA\\u8D1F\\u8D23\\u3002\\u6211\\u5174\\u8DA3\\u8F83\\u5C0F\\u6216\\u8005\\u521A\\u63A5\\u89E6\\u7684\\u6280\\u672F\\u6808\\uFF0C\\u6211\\u505A\\u7684\\u51C6\\u5219\\u5927\\u90E8\\u5206\\u662F\\u80FD\\u7528\\u5373\\u53EF\\uFF0C\\u5185\\u5FC3\\u5F88\\u96BE\\u60F3\\u7740\\u53BB\\u4F18\\u5316\\u548C\\u66F4\\u597D\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u800C\\u5174\\u8DA3\\u5F88\\u5927\\u7684\\u6280\\u672F\\u6808\\uFF0C\\u6211\\u613F\\u610F\\u82B1\\u66F4\\u591A\\u7684\\u65F6\\u95F4\\u505A\\u51FA\\u4F18\\u96C5\\u7684\\u5B9E\\u73B0\\uFF0C\\u6240\\u4EE5\\u6211\\u662F\\u4E00\\u4E2A\\u6709\\u504F\\u597D\\u7684\\u5168\\u6808\\uFF0C\\u4F5C\\u4E3A\\u5F00\\u53D1\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u516C\\u53F8\\u662F\\u4E00\\u4E2A\\u4E0D\\u597D\\u7684\\u70B9\\uFF0C\\u6211\\u53EF\\u4EE5\\u5B8C\\u6210\\u9879\\u76EE\\u521D\\u671F\\u7684\\u5F00\\u53D1\\uFF0C\\u53EF\\u4EE5\\u7528\\u81EA\\u5DF1\\u5728\\u5168\\u6808\\u4E0A\\u7684\\u80FD\\u529B\\u5BF9\\u6280\\u672F\\u65B9\\u6848\\u8BC4\\u4F30\\uFF0C\\u800C\\u5982\\u679C\\u4E3A\\u7A0D\\u5FAE\\u5927\\u4E00\\u4E9B\\u7684\\u56E2\\u961F\\u5168\\u90E8\\u7684\\u6280\\u672F\\u6808\\u8D1F\\u8D23\\uFF0C\\u5C31\\u9700\\u8981\\u6DF1\\u5165\\u4E86\\u89E3\\uFF0C\\u5404\\u53F8\\u5176\\u804C\\u7684\\u4E13\\u5BB6\\uFF0C\\u771F\\u4E0D\\u662F\\u4E00\\u4E2A\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\u7684\\u5DE5\\u4F5C\\uFF0C\\u80FD\\u529B\\u518D\\u5F3A\\u4E5F\\u4E0D\\u884C\\u3002\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u6211\\u7684\\u5168\\u6808\\u662F\\u6211\\u5174\\u8DA3\\u7684\\u6700\\u5927\\u4F53\\u73B0\\u3002\")), mdx(\"hr\", null), mdx(\"div\", null, mdx(\"div\", {\n style: {\n textAlign: 'center'\n }\n }, \"\\u751F\\u547D\\u4E0D\\u606F\\uFF0C\\u6298\\u817E\\u4E0D\\u6B62\\u3002\")), mdx(\"hr\", null));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"e4929f26-4432-5ad2-a704-a0f176aa00a6","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/es-class.md","id":"7a84bc76-ba53-5e16-a1bc-e584aac14ed6","parent":{"name":"es-class","sourceInstanceName":"blog"},"excerpt":"想让读者了解的事情 在阅读这篇关于 ES Class 的文章前，希望你能理解： Class 是语法糖 - ES Class 本质上是 prototype 的语法糖，不是全新的概念 执行环境的差异 - 不同环境下 Class 的表现可能有所不同 继承机制的本质 - 理解原型链和构造函数的执行顺序 静态 vs 实例 - 明确静态方法和实例方法的区别和使用场景 私有成员的重要性 - 私有字段和方法如何提升代码安全性 TypeScript 的增强 - TS 在 Class…","fields":{"title":"🚑 ES Class 相关","slug":"/blog/es-class","description":"ES 的很多标准 ES6、ES7 甚至草案阶段的实现，加上 TS 等的实现，有时候会让人蒙圈。今天用到了 Class，相关的概念先梳理下。","date":"2019-10-20","redirects":null,"datetime":"2019-10-20 14:35:15","categories":["code"],"series":null,"tags":["ESLint","前端","TypeScript","最佳实践"],"status":"online"},"frontmatter":{"published":null,"tags":["ESLint","前端","TypeScript","最佳实践"],"theme":null,"slug":"es-class","date":"2019-10-20 14:35:15"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"es-class\",\n \"title\": \"🚑 ES Class 相关\",\n \"date\": \"2019-10-20 14:35:15\",\n \"author\": \"Ubug\",\n \"description\": \"ES 的很多标准 ES6、ES7 甚至草案阶段的实现，加上 TS 等的实现，有时候会让人蒙圈。今天用到了 Class，相关的概念先梳理下。\",\n \"categories\": [\"code\"],\n \"tags\": [\"ESLint\", \"前端\", \"TypeScript\", \"最佳实践\"],\n \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h2\", null, \"\\u60F3\\u8BA9\\u8BFB\\u8005\\u4E86\\u89E3\\u7684\\u4E8B\\u60C5\"), mdx(\"p\", null, \"\\u5728\\u9605\\u8BFB\\u8FD9\\u7BC7\\u5173\\u4E8E ES Class \\u7684\\u6587\\u7AE0\\u524D\\uFF0C\\u5E0C\\u671B\\u4F60\\u80FD\\u7406\\u89E3\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Class \\u662F\\u8BED\\u6CD5\\u7CD6\"), \" - ES Class \\u672C\\u8D28\\u4E0A\\u662F prototype \\u7684\\u8BED\\u6CD5\\u7CD6\\uFF0C\\u4E0D\\u662F\\u5168\\u65B0\\u7684\\u6982\\u5FF5\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6267\\u884C\\u73AF\\u5883\\u7684\\u5DEE\\u5F02\"), \" - \\u4E0D\\u540C\\u73AF\\u5883\\u4E0B Class \\u7684\\u8868\\u73B0\\u53EF\\u80FD\\u6709\\u6240\\u4E0D\\u540C\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u7EE7\\u627F\\u673A\\u5236\\u7684\\u672C\\u8D28\"), \" - \\u7406\\u89E3\\u539F\\u578B\\u94FE\\u548C\\u6784\\u9020\\u51FD\\u6570\\u7684\\u6267\\u884C\\u987A\\u5E8F\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u9759\\u6001 vs \\u5B9E\\u4F8B\"), \" - \\u660E\\u786E\\u9759\\u6001\\u65B9\\u6CD5\\u548C\\u5B9E\\u4F8B\\u65B9\\u6CD5\\u7684\\u533A\\u522B\\u548C\\u4F7F\\u7528\\u573A\\u666F\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u79C1\\u6709\\u6210\\u5458\\u7684\\u91CD\\u8981\\u6027\"), \" - \\u79C1\\u6709\\u5B57\\u6BB5\\u548C\\u65B9\\u6CD5\\u5982\\u4F55\\u63D0\\u5347\\u4EE3\\u7801\\u5B89\\u5168\\u6027\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"TypeScript \\u7684\\u589E\\u5F3A\"), \" - TS \\u5728 Class \\u4E0A\\u589E\\u52A0\\u4E86\\u7C7B\\u578B\\u6CE8\\u89E3\\u3001\\u8BBF\\u95EE\\u4FEE\\u9970\\u7B26\\u3001\\u62BD\\u8C61\\u7C7B\\u7B49\\u80FD\\u529B\\uFF0C\\u4F46\\u6700\\u7EC8\\u7F16\\u8BD1\\u4EA7\\u7269\\u8FD8\\n\\u662F ES Class\")), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u8BA9\\u4F60\\u77E5\\u9053 ES Class \\u7684\\u4E0D\\u540C\\u6807\\u51C6\\u548C\\u5B9E\\u73B0\\uFF0C\\u867D\\u7136\\u611F\\u89C9\\u5F88\\u7B26\\u5408\\u76F4\\u89C9\\uFF0C\\u4F46\\u662F\\u4ECD\\u7136\\u4ECE\\u672C\\u8D28\\u4E0A\\u4E0D\\u540C\\u7684\\u5730\\u65B9\\u3002\")), mdx(\"p\", null, \"class \\u7684\\u5386\\u53F2\\u53D8\\u9769\\u7B97\\u662F\\u5F88\\u574E\\u5777\\uFF0C\\u4F46\\u662F\\u5E76\\u6CA1\\u6709\\u4EC0\\u4E48\\u610F\\u601D\\uFF0Cclass \\u4E5F\\u66F4\\u591A\\u7684\\u662F\\u4E00\\u79CD\\u8BA9\\u5927\\u90E8\\u5206\\u4EBA\\u90FD\\u5F88\\u5BB9\\u6613\\u7406\\u89E3\\u7684\\u89C4\\u8303\\u800C\\u5DF2\\n\\u3002\\u5305\\u62EC\\u5404\\u79CD prototype \\u5C01\\u88C5\\u3001\\u8BED\\u6CD5\\u7CD6\\u3001Hack \\u4E4B\\u7C7B\\u7684\\u8BA8\\u8BBA\\u4E5F\\u90FD\\u5E76\\u4E0D\\u662F\\u9762\\u5411\\u4E1A\\u52A1\\u548C\\u666E\\u9002\\u7684\\u5DE5\\u7A0B\\u5316\\u7684\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u66F4\\u60F3\\u89E3\\u91CA\\u4E0B\\u5404\\u79CD\\u8FD0\\u884C\\u5F00\\u53D1\\u73AF\\u5883\\u4E0B\\u4E60\\u4EE5\\u4E3A\\u5E38\\u7684\\u7528\\u6CD5\\uFF0C\\u6709\\u54EA\\u4E9B\\u53CD\\u76F4\\u89C9\\u6216\\u8005\\u8BF4\\u4E0D\\u4E00\\u6837\\u7684\\uFF0C\\u5F53\\u7136\\u4EC5\\u4EC5\\u5BF9\\u4E8E\\u6211\\u6765\\u8BF4\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u540E\\u6765\\u5DE5\\u4F5C\\u4E2D\\u5927\\u91CF\\u4F7F\\u7528\\u4E86 TypeScript\\uFF0C\\u53D1\\u73B0 TS \\u5BF9 Class \\u505A\\u4E86\\u5F88\\u591A\\u589E\\u5F3A\\u3002\\u8FD9\\u7BC7\\u6587\\u7AE0\\u4E5F\\u987A\\u52BF\\u52A0\\u5165\\u4E86 TS \\u76F8\\u5173\\u7684\\u5185\\u5BB9\\n\\uFF0C\\u6BD5\\u7ADF\\u73B0\\u5728\\u5199 JS \\u4E0D\\u5E26 TS \\u5DF2\\u7ECF\\u5F88\\u5C11\\u89C1\\u4E86\\u3002\")), mdx(\"h3\", null, \"1. \\u7C7B\\u58F0\\u660E vs \\u7C7B\\u8868\\u8FBE\\u5F0F\"), mdx(\"p\", null, \"\\u867D\\u7136\\u770B\\u8D77\\u6765\\u76F8\\u4F3C\\uFF0C\\u4F46\\u4E24\\u8005\\u6709\\u91CD\\u8981\\u533A\\u522B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// \\u7C7B\\u58F0\\u660E\\uFF08\\u63D0\\u5347\\uFF09\\nRectangle // \\u53EF\\u4EE5\\u8BBF\\u95EE\\uFF08hoisted\\uFF09\\nclass Rectangle {\\n constructor(height, width) {\\n this.height = height\\n this.width = width\\n }\\n}\\n\\n// \\u7C7B\\u8868\\u8FBE\\u5F0F\\uFF08\\u4E0D\\u63D0\\u5347\\uFF09\\nlet Square = class {\\n constructor(side) {\\n this.side = side\\n }\\n}\\n\\nSquare // \\u53EF\\u4EE5\\u8BBF\\u95EE\\nRectangleClass // ReferenceError: Cannot access 'RectangleClass' before initialization\\n\")), mdx(\"p\", null, \"\\u5728\\u5B9E\\u9645\\u9879\\u76EE\\u4E2D\\uFF0C\\u7C7B\\u58F0\\u660E\\u66F4\\u5BB9\\u6613\\u7EF4\\u62A4\\uFF0C\\u800C\\u7C7B\\u8868\\u8FBE\\u5F0F\\u5728\\u9700\\u8981\\u52A8\\u6001\\u521B\\u5EFA\\u7C7B\\u65F6\\u5F88\\u6709\\u7528\\u3002\"), mdx(\"h3\", null, \"2. \\u6784\\u9020\\u51FD\\u6570\\uFF0C\\u9759\\u6001\\u65B9\\u6CD5\\uFF0C\\u539F\\u578B\\u65B9\\u6CD5\\uFF0Cgetter \\u548C setter \\u90FD\\u5728\\u4E25\\u683C\\u6A21\\u5F0F\\u4E0B\\u6267\\u884C\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"class Rectangle {\\n constructor(height, width) {\\n this.height = height\\n this.width = width\\n }\\n}\\n\")), mdx(\"h3\", null, \"3. \\u5B9E\\u4F8B\\u5C5E\\u6027 / \\u5B57\\u6BB5\\u58F0\\u660E / \\u516C\\u5171\\u548C\\u79C1\\u6709\\u5B57\\u6BB5\"), mdx(\"p\", null, \"\\u4E00\\u822C\\u7C7B\\u91CC\\u9762\\u7684\\u5173\\u952E\\u8BCD\\u6709\\uFF1A\\u5C5E\\u6027\\u3001\\u65B9\\u6CD5\\uFF0C\\u9759\\u6001\\u65B9\\u6CD5\\u3002\"), mdx(\"p\", null, \"ES2022 \\u6B63\\u5F0F\\u5F15\\u5165\\u4E86\\u79C1\\u6709\\u5B57\\u6BB5\\uFF08\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"#\"), \" \\u524D\\u7F00\\uFF09\\uFF0C\\u4E4B\\u524D\\u5927\\u5BB6\\u53EA\\u80FD\\u9760\\u547D\\u540D\\u7EA6\\u5B9A\\uFF08\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"_xxx\"), \"\\uFF09\\u6765\\\"\\u5047\\u88C5\\\"\\u79C1\\u6709\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"class User {\\n #password = '123456'; // \\u79C1\\u6709\\u5B57\\u6BB5\\uFF0C\\u5916\\u90E8\\u65E0\\u6CD5\\u8BBF\\u95EE\\n\\n constructor(name) {\\n this.name = name; // \\u516C\\u5171\\u5B57\\u6BB5\\n }\\n\\n #validate(pwd) { // \\u79C1\\u6709\\u65B9\\u6CD5\\n return pwd === this.#password;\\n }\\n\\n login(pwd) {\\n return this.#validate(pwd);\\n }\\n}\\n\\nconst u = new User('ubug');\\nu.#password; // SyntaxError: Private field '#password' must be declared in an enclosing class\\n\")), mdx(\"p\", null, \"\\u6CE8\\u610F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"#\"), \" \\u79C1\\u6709\\u5B57\\u6BB5\\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"private\"), \" \\u5173\\u952E\\u5B57\\u4E0D\\u4E00\\u6837\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"#\"), \" \\u662F\\u8BED\\u8A00\\u5C42\\u9762\\u7684\\u5B9E\\u73B0\\uFF0C\\u4E0D\\u662F TypeScript \\u7279\\u6709\\u7684\\u3002\"), mdx(\"h3\", null, \"4. \\u7C7B\\u6210\\u5458\\u58F0\\u660E\"), mdx(\"p\", null, \"-> \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/tc39/proposal-class-fields\"\n }, \"https://github.com/tc39/proposal-class-fields\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"class A {\\n method() {\\n //\\n }\\n method2 = function() {\\n // Unexpected token =\\n // fixed by @babel/plugin-proposal-class-properties\\n // Class field declarations\\n }\\n}\\nA.prototype.method3 = function() {\\n //\\n}\\n\")), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"method2\"), \" \\u662F\\u5C5E\\u6027\\uFF0C\\u5F15\\u7528\\u4E86\\u4E00\\u4E2A\\u51FD\\u6570\\uFF1Bmethod \\u548C method3 \\u90FD\\u662F\\u5B9E\\u4F8B\\u65B9\\u6CD5\\u3002\"), mdx(\"h4\", null, \"4.1 TypeScript \\u4E2D\\u7684\\u7C7B\\u578B\\u6CE8\\u89E3\"), mdx(\"p\", null, \"TS \\u91CC\\u5199 Class \\u6700\\u76F4\\u89C2\\u7684\\u533A\\u522B\\u5C31\\u662F\\u5C5E\\u6027\\u8981\\u58F0\\u660E\\u7C7B\\u578B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class Rectangle {\\n width: number\\n height: number\\n\\n constructor(width: number, height: number) {\\n this.width = width\\n this.height = height\\n }\\n\\n getArea(): number {\\n return this.width * this.height\\n }\\n}\\n\")), mdx(\"p\", null, \"\\u53C2\\u6570\\u5C5E\\u6027\\uFF08Parameter Properties\\uFF09\\u662F\\u4E2A\\u5F88\\u7701\\u4E8B\\u7684\\u5199\\u6CD5\\uFF0C\\u6784\\u9020\\u51FD\\u6570\\u53C2\\u6570\\u52A0\\u4FEE\\u9970\\u7B26\\u5C31\\u80FD\\u81EA\\u52A8\\u58F0\\u660E\\u5E76\\u8D4B\\u503C\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class Rectangle {\\n constructor(public width: number, public height: number) {}\\n\\n getArea(): number {\\n return this.width * this.height\\n }\\n}\\n\")), mdx(\"p\", null, \"\\u5C11\\u5199\\u51E0\\u884C\\u4EE3\\u7801\\uFF0C\\u5BF9\\u4E8E DTO \\u4E4B\\u7C7B\\u7684\\u7C7B\\u7279\\u522B\\u597D\\u7528\\u3002\"), mdx(\"h4\", null, \"4.2 \\u8BBF\\u95EE\\u4FEE\\u9970\\u7B26\"), mdx(\"p\", null, \"TypeScript \\u63D0\\u4F9B\\u4E86\\u4E09\\u4E2A\\u8BBF\\u95EE\\u4FEE\\u9970\\u7B26\\uFF1A\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"public\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"private\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"protected\"), \"\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class Animal {\\n public name: string // \\u516C\\u5F00\\uFF0C\\u9ED8\\u8BA4\\u5C31\\u662F\\u8FD9\\u4E2A\\n private age: number // \\u79C1\\u6709\\uFF0C\\u53EA\\u6709\\u7C7B\\u5185\\u90E8\\u80FD\\u8BBF\\u95EE\\n protected species: string // \\u53D7\\u4FDD\\u62A4\\uFF0C\\u5B50\\u7C7B\\u80FD\\u8BBF\\u95EE\\n\\n constructor(name: string, age: number, species: string) {\\n this.name = name\\n this.age = age\\n this.species = species\\n }\\n}\\n\\nclass Dog extends Animal {\\n constructor(name: string, age: string) {\\n super(name, age, 'Canis lupus familiaris')\\n }\\n\\n getInfo(): string {\\n return `${this.name} (${this.species})` // \\u53EF\\u4EE5\\u8BBF\\u95EE protected\\uFF0C\\u4E0D\\u80FD\\u8BBF\\u95EE private\\n }\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u6709\\u4E2A\\u5BB9\\u6613\\u6DF7\\u6DC6\\u7684\\u70B9\\uFF1A\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"TS \\u7684 \", mdx(\"inlineCode\", {\n parentName: \"strong\"\n }, \"private\"), \" \\u548C ES2022 \\u7684 \", mdx(\"inlineCode\", {\n parentName: \"strong\"\n }, \"#\"), \" \\u662F\\u4E24\\u5957\\u4E1C\\u897F\"), \"\\u3002\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"TS \\u7684 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"private\"), \" \\u662F\\u7F16\\u8BD1\\u671F\\u68C0\\u67E5\\uFF0C\\u7F16\\u8BD1\\u540E\\u6D88\\u5931\\uFF0C\\u8FD0\\u884C\\u65F6\\u8DDF\\u666E\\u901A\\u5C5E\\u6027\\u6CA1\\u533A\\u522B\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"#\"), \" \\u662F ES \\u8BED\\u8A00\\u6807\\u51C6\\uFF0C\\u8FD0\\u884C\\u65F6\\u5F3A\\u5236\\u79C1\\u6709\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class Foo {\\n private bar = 1;\\n #baz = 2;\\n}\\n\\n// \\u7F16\\u8BD1\\u4E3A JS \\u540E\\uFF1A\\nclass Foo {\\n constructor() {\\n this.bar = 1; // \\u8FD0\\u884C\\u65F6\\u5B8C\\u5168\\u53EF\\u8BBF\\u95EE\\n this.#baz = 2; // \\u8FD0\\u884C\\u65F6\\u771F\\u7684\\u79C1\\u6709\\n }\\n}\\n\")), mdx(\"p\", null, \"\\u5B9E\\u9645\\u9879\\u76EE\\u4E2D\\u600E\\u4E48\\u9009\\uFF1F\\u8BF4\\u5B9E\\u8BDD\\u5927\\u591A\\u6570\\u65F6\\u5019\\u7528 TS \\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"private\"), \" \\u5C31\\u591F\\u4E86\\uFF0C\\u6BD5\\u7ADF\\u7C7B\\u578B\\u68C0\\u67E5\\u5DF2\\u7ECF\\u5728\\u7F16\\u8BD1\\u671F\\u5E2E\\u4F60\\u515C\\u5E95\\u4E86\\uFF0C\\u8DB3\\u591F\\u7528\\u4E86\\u3002\"), mdx(\"h4\", null, \"4.3 readonly \\u4FEE\\u9970\\u7B26\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class Config {\\n readonly env: string\\n readonly version: string\\n\\n constructor(env: string, version: string) {\\n this.env = env\\n this.version = version\\n }\\n}\\n\\nconst cfg = new Config('production', '1.0.0')\\ncfg.env = 'dev' // TS Error: Cannot assign to 'env' because it is a read-only property\\n\")), mdx(\"p\", null, \"\\u4E5F\\u53EF\\u4EE5\\u548C\\u53C2\\u6570\\u5C5E\\u6027\\u7EC4\\u5408\\u4F7F\\u7528\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class Config {\\n constructor(public readonly env: string, public readonly version: string) {}\\n}\\n\")), mdx(\"h3\", null, \"5. extends \\u7EE7\\u627F\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"class Animal {\\n constructor(name) {\\n this.name = name\\n }\\n speak() {\\n console.log(`${this.name} makes a noise.`)\\n }\\n}\\n\\nclass Dog extends Animal {\\n speak() {\\n console.log(`${this.name} barks.`)\\n }\\n}\\n\")), mdx(\"p\", null, \"\\u7EE7\\u627F\\u7684\\u8981\\u70B9\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5B50\\u7C7B\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"constructor\"), \" \\u91CC\\u5FC5\\u987B\\u5148\\u8C03\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"super()\"), \" \\u624D\\u80FD\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"this\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"extends\"), \" \\u4E0D\\u4EC5\\u80FD\\u7EE7\\u627F\\u7C7B\\uFF0C\\u8FD8\\u80FD\\u7EE7\\u627F\\\"\\u5177\\u6709\\u6784\\u9020\\u7B7E\\u540D\\u7684\\u5BF9\\u8C61\\\"\\uFF08TS \\u4E2D\\uFF09\")), mdx(\"h4\", null, \"5.1 TypeScript \\u4E2D\\u7684\\u7EE7\\u627F\"), mdx(\"p\", null, \"TS \\u5728\\u7EE7\\u627F\\u8FD9\\u5757\\u4E3B\\u8981\\u589E\\u52A0\\u4E86\\u7C7B\\u578B\\u7EA6\\u675F\\uFF0C\\u8BA9\\u7236\\u5B50\\u7C7B\\u7684\\u5173\\u7CFB\\u66F4\\u660E\\u786E\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class Animal {\\n constructor(public name: string) {}\\n\\n speak(): string {\\n return `${this.name} makes a noise.`\\n }\\n}\\n\\nclass Dog extends Animal {\\n constructor(name: string, public breed: string) {\\n super(name)\\n }\\n\\n speak(): string {\\n return `${this.name} barks.`\\n }\\n}\\n\\nconst d = new Dog('Buddy', 'Golden Retriever')\\nd.speak() // \\\"Buddy barks.\\\"\\nd.breed // \\\"Golden Retriever\\\"\\nd.name // \\\"Buddy\\\" \\u2014 \\u7EE7\\u627F\\u81EA Animal\\n\")), mdx(\"p\", null, \"TS \\u8FD8\\u5141\\u8BB8\\u7EE7\\u627F\\u5185\\u7F6E\\u7C7B\\u578B\\uFF0C\\u8FD9\\u5728 ES \\u4E2D\\u662F\\u505A\\u4E0D\\u5230\\u7C7B\\u578B\\u5B89\\u5168\\u7684\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class MyArray extends Array {\\n first(): T | undefined {\\n return this[0]\\n }\\n\\n last(): T | undefined {\\n return this[this.length - 1]\\n }\\n}\\n\\nconst arr = new MyArray(1, 2, 3)\\narr.first() // 1\\narr.last() // 3\\n\")), mdx(\"h3\", null, \"6. \\u5B50\\u7C7B\\u8986\\u76D6\\u7236\\u7C7B\"), mdx(\"p\", null, \"\\u5B50\\u7C7B\\u8986\\u76D6\\u7236\\u7C7B\\u65B9\\u6CD5\\u65F6\\uFF0CTS \\u7684\\u89C4\\u5219\\u6BD4 ES \\u4E25\\u683C\\u5F97\\u591A\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class Base {\\n greet(name: string): string {\\n return `Hello, ${name}`\\n }\\n\\n log(): void {\\n console.log('logging')\\n }\\n}\\n\\nclass Derived extends Base {\\n // \\u53C2\\u6570\\u7C7B\\u578B\\u5FC5\\u987B\\u517C\\u5BB9\\uFF08\\u53EF\\u4EE5\\u66F4\\u5BBD\\u677E\\uFF0C\\u4F46\\u4E0D\\u80FD\\u66F4\\u4E25\\u683C\\uFF09\\n greet(name: string | number): string {\\n return `Hello, ${name}`\\n }\\n\\n // \\u8FD4\\u56DE\\u7C7B\\u578B\\u4E5F\\u5FC5\\u987B\\u517C\\u5BB9\\uFF08\\u53EF\\u4EE5\\u66F4\\u5177\\u4F53\\uFF0C\\u4F46\\u4E0D\\u80FD\\u66F4\\u5BBD\\u6CDB\\uFF09\\n // log(): number { return 1; } // Error: \\u7C7B\\u578B\\u4E0D\\u517C\\u5BB9\\n}\\n\")), mdx(\"p\", null, \"\\u7B80\\u5355\\u6765\\u8BF4\\u5C31\\u662F\\u91CC\\u6C0F\\u66FF\\u6362\\u539F\\u5219\\uFF08LSP\\uFF09\\uFF1A\\u51E1\\u662F\\u80FD\\u7528\\u7236\\u7C7B\\u7684\\u5730\\u65B9\\uFF0C\\u5B50\\u7C7B\\u5E94\\u8BE5\\u4E5F\\u80FD\\u7528\\uFF0C\\u4E0D\\u80FD\\\"\\u7834\\u574F\\u5951\\u7EA6\\\"\\u3002\"), mdx(\"h3\", null, \"7. this \\u95EE\\u9898\"), mdx(\"p\", null, \"prototype properties arrow functions are not present on the object's prototype, they are merely\\nproperties holding a reference to a function.\"), mdx(\"p\", null, \"\\u5728 Class \\u4E2D \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"this\"), \" \\u4E22\\u5931\\u662F\\u7ECF\\u5178\\u95EE\\u9898\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"class Button {\\n constructor(label) {\\n this.label = label\\n }\\n\\n handleClick() {\\n console.log(`Clicked: ${this.label}`)\\n }\\n\\n render() {\\n const btn = document.createElement('button')\\n btn.textContent = this.label\\n btn.addEventListener('click', this.handleClick) // this \\u4F1A\\u4E22\\u5931\\uFF01\\n return btn\\n }\\n}\\n\")), mdx(\"p\", null, \"\\u5E38\\u89C1\\u89E3\\u6CD5\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"// \\u65B9\\u6848\\u4E00\\uFF1A\\u6784\\u9020\\u51FD\\u6570\\u91CC bind\\nconstructor(label) {\\n this.label = label;\\n this.handleClick = this.handleClick.bind(this);\\n}\\n\\n// \\u65B9\\u6848\\u4E8C\\uFF1A\\u7BAD\\u5934\\u51FD\\u6570\\u5C5E\\u6027\\uFF08Class Fields\\uFF09\\nhandleClick = () => {\\n console.log(`Clicked: ${this.label}`);\\n};\\n\\n// \\u65B9\\u6848\\u4E09\\uFF1A\\u4E8B\\u4EF6\\u76D1\\u542C\\u65F6\\u5305\\u88C5\\nbtn.addEventListener('click', () => this.handleClick());\\n\")), mdx(\"h4\", null, \"7.1 TypeScript \\u4E2D\\u7684 this \\u7C7B\\u578B\"), mdx(\"p\", null, \"TS \\u5BF9 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"this\"), \" \\u6709\\u4E13\\u95E8\\u7684\\u7C7B\\u578B\\u7CFB\\u7EDF\\u652F\\u6301\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class Handler {\\n info: string\\n\\n constructor(info: string) {\\n this.info = info\\n }\\n\\n // this \\u53C2\\u6570\\uFF1A\\u786E\\u4FDD\\u65B9\\u6CD5\\u53EA\\u5728\\u6B63\\u786E\\u7684\\u5BF9\\u8C61\\u4E0A\\u88AB\\u8C03\\u7528\\n greet(this: {info: string}): string {\\n return `Hello, ${this.info}`\\n }\\n}\\n\\nconst h = new Handler('world')\\nh.greet() // OK\\n\\n// \\u89E3\\u6784\\u540E this \\u4E22\\u5931\\uFF0CTS \\u80FD\\u68C0\\u67E5\\u51FA\\u6765\\nconst {greet} = h\\ngreet() // TS Error: The 'this' context of type 'void' is not assignable to method's 'this'\\n\")), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"this\"), \" \\u7C7B\\u578B\\u5728\\u94FE\\u5F0F\\u8C03\\u7528\\u4E2D\\u7279\\u522B\\u597D\\u7528\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class QueryBuilder {\\n private query = ''\\n\\n where(condition: string): this {\\n this.query += ` WHERE ${condition}`\\n return this\\n }\\n\\n orderBy(field: string): this {\\n this.query += ` ORDER BY ${field}`\\n return this\\n }\\n\\n build(): string {\\n return this.query\\n }\\n}\\n\\nconst q = new QueryBuilder()\\n .where('age > 18')\\n .orderBy('name')\\n .build()\\n\")), mdx(\"p\", null, \"\\u8FD4\\u56DE \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"this\"), \" \\u800C\\u4E0D\\u662F\\u5177\\u4F53\\u7C7B\\u540D\\u7684\\u597D\\u5904\\u662F\\uFF1A\\u5B50\\u7C7B\\u7EE7\\u627F\\u540E\\u94FE\\u5F0F\\u8C03\\u7528\\u8FD4\\u56DE\\u7684\\u8FD8\\u662F\\u5B50\\u7C7B\\u7C7B\\u578B\\uFF0C\\u7C7B\\u578B\\u4E0D\\u4F1A\\u4E22\\u5931\\u3002\"), mdx(\"h3\", null, \"8. \\u62BD\\u8C61\\u7C7B\"), mdx(\"p\", null, \"\\u8FD9\\u662F TypeScript \\u72EC\\u6709\\u7684\\uFF0CES \\u6807\\u51C6\\u6CA1\\u6709\\u62BD\\u8C61\\u7C7B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"abstract class Shape {\\n abstract getArea(): number // \\u5B50\\u7C7B\\u5FC5\\u987B\\u5B9E\\u73B0\\n\\n describe(): string {\\n return `This shape has an area of ${this.getArea()}`\\n }\\n}\\n\\nclass Circle extends Shape {\\n constructor(public radius: number) {\\n super()\\n }\\n\\n getArea(): number {\\n return Math.PI * this.radius ** 2\\n }\\n}\\n\\n// const s = new Shape(); // TS Error: \\u4E0D\\u80FD\\u5B9E\\u4F8B\\u5316\\u62BD\\u8C61\\u7C7B\\nconst c = new Circle(5)\\nc.describe() // \\\"This shape has an area of 78.53981633974483\\\"\\n\")), mdx(\"p\", null, \"\\u62BD\\u8C61\\u7C7B\\u548C\\u63A5\\u53E3\\u7684\\u533A\\u522B\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u62BD\\u8C61\\u7C7B\\u53EF\\u4EE5\\u6709\\u5B9E\\u73B0\\uFF0C\\u63A5\\u53E3\\u4E0D\\u80FD\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u4E00\\u4E2A\\u7C7B\\u53EA\\u80FD\\u7EE7\\u627F\\u4E00\\u4E2A\\u62BD\\u8C61\\u7C7B\\uFF0C\\u4F46\\u53EF\\u4EE5\\u5B9E\\u73B0\\u591A\\u4E2A\\u63A5\\u53E3\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u62BD\\u8C61\\u7C7B\\u9002\\u5408\\\"\\u6A21\\u677F\\u65B9\\u6CD5\\\"\\u6A21\\u5F0F\\uFF0C\\u63A5\\u53E3\\u9002\\u5408\\u5B9A\\u4E49\\\"\\u5951\\u7EA6\\\"\")), mdx(\"h3\", null, \"9. \\u63A5\\u53E3\\u5B9E\\u73B0\\uFF08implements\\uFF09\"), mdx(\"p\", null, \"\\u7C7B\\u53EF\\u4EE5\\u5B9E\\u73B0\\u4E00\\u4E2A\\u6216\\u591A\\u4E2A\\u63A5\\u53E3\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"interface Printable {\\n print(): void\\n}\\n\\ninterface Loggable {\\n log(message: string): void\\n}\\n\\nclass Report implements Printable, Loggable {\\n constructor(public title: string) {}\\n\\n print(): void {\\n console.log(`Printing: ${this.title}`)\\n }\\n\\n log(message: string): void {\\n console.log(`[${this.title}] ${message}`)\\n }\\n}\\n\")), mdx(\"p\", null, \"\\u6CE8\\u610F TS \\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"implements\"), \" \\u53EA\\u505A\\u7F16\\u8BD1\\u671F\\u68C0\\u67E5\\uFF0C\\u4E0D\\u50CF Java \\u90A3\\u6837\\u6709\\u8FD0\\u884C\\u65F6\\u7684 interface \\u673A\\u5236\\u3002\\u7F16\\u8BD1\\u540E JS \\u91CC\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"implements\"), \" \\u5B8C\\u5168\\u6D88\\u5931\\u3002\"), mdx(\"h3\", null, \"10. \\u6CDB\\u578B\\u7C7B\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class DataStore {\\n private items: T[] = []\\n\\n add(item: T): void {\\n this.items.push(item)\\n }\\n\\n get(index: number): T | undefined {\\n return this.items[index]\\n }\\n\\n getAll(): T[] {\\n return [...this.items]\\n }\\n}\\n\\nconst numberStore = new DataStore()\\nnumberStore.add(1)\\nnumberStore.add('hello') // TS Error: \\u7C7B\\u578B\\u4E0D\\u5339\\u914D\\n\\nconst stringStore = new DataStore()\\nstringStore.add('hello')\\n\")), mdx(\"p\", null, \"\\u6CDB\\u578B\\u7C7B\\u5728\\u5199\\u5DE5\\u5177\\u5E93\\u548C\\u57FA\\u7840\\u7EC4\\u4EF6\\u65F6\\u7279\\u522B\\u6709\\u7528\\uFF0C\\u53EF\\u4EE5\\u907F\\u514D\\u5199\\u4E00\\u5806 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"any\"), \"\\u3002\"), mdx(\"h2\", null, \"\\u6700\\u540E\"), mdx(\"p\", null, \"\\u56DE\\u987E\\u4E00\\u4E0B\\uFF0CES Class \\u672C\\u8D28\\u662F prototype \\u7684\\u8BED\\u6CD5\\u7CD6\\uFF0C\\u800C TypeScript \\u5728\\u6B64\\u57FA\\u7840\\u4E0A\\u589E\\u52A0\\u4E86\\u7C7B\\u578B\\u7CFB\\u7EDF\\u3001\\u8BBF\\u95EE\\u4FEE\\u9970\\u7B26\\u3001\\u62BD\\u8C61\\u7C7B\\u3001\\u63A5\\u53E3\\u5B9E\\u73B0\\u3001\\u6CDB\\u578B\\u7B49\\u80FD\\u529B\\u3002\\u4F46\\u5F52\\u6839\\u7ED3\\u5E95\\uFF0CTS \\u7F16\\u8BD1\\u540E\\u8FD8\\u662F\\u4EA7\\u51FA ES Class \\u7684\\u4EE3\\u7801\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/react-hooks-vs-class/react-hooks-vs-class.md","id":"d96d11a2-0488-56a8-9113-753a97f12f03","parent":{"name":"react-hooks-vs-class","sourceInstanceName":"blog"},"excerpt":"想分享的是对 React-Hooks 这个新功能的思考，不仅仅是新的接口，重要的是这种开发模式代表的逻辑的拆分，状态和副作用的思维方式，而不是生命周期~~ Hooks 概念刚出来的时候就看了发布会的 Presentation，当时感觉思想特别好，能够在一个函数里面就可以对数据和生命周期进行管理。 而且对于从 prototype 过来的原型继承，一直觉得虽然 Class 很好用，但是太重量了，一个很简单的组件只要涉及到内部状态就要有 Class，所以 Hooks…","fields":{"title":"⚓ React Hooks 理解","slug":"/blog/react-hooks-vs-class","description":"hooks 的思想是开发者不再需要去理清每一个生命周期函数的触发时机，以及在里面处理逻辑会有哪些影响。而是更关注去思考哪些是状态，哪些是副作用，哪些是需要缓存的复杂计算和不必要的渲染。class 更偏向的是清晰完整的生命周期，一个经典的面向对象思想，强调的是方法和属性。","date":"2019-09-18","redirects":null,"datetime":"2019-09-18 20:24:36","categories":["code"],"series":null,"tags":["react","hooks","技巧","思考","功能"],"status":"online"},"frontmatter":{"published":null,"tags":["react","hooks","技巧","思考","功能"],"theme":null,"slug":"react-hooks-vs-class","date":"2019-09-18 20:24:36"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst View = () => {\n let [count, setCount] = React.useState(0);\n return mdx(\"button\", {\n onClick: () => setCount(count + 1)\n }, \"\\u70B9\\u6211\\uFF1A\", count);\n};\nfunction Counter() {\n const [count, setCount] = useState(0);\n useEffect(() => {\n const id = setInterval(() => {\n setCount(count + 1); // This effect depends on the `count` state\n }, 1000);\n return () => clearInterval(id);\n }, []); // 🔴 Bug: `count` is not specified as a dependency\n return mdx(\"div\", null, count);\n}\nconst _frontmatter = {\n \"slug\": \"react-hooks-vs-class\",\n \"title\": \"⚓ React Hooks 理解\",\n \"date\": \"2019-09-18 20:24:36\",\n \"author\": \"Ubug\",\n \"description\": \"hooks 的思想是开发者不再需要去理清每一个生命周期函数的触发时机，以及在里面处理逻辑会有哪些影响。而是更关注去思考哪些是状态，哪些是副作用，哪些是需要缓存的复杂计算和不必要的渲染。class 更偏向的是清晰完整的生命周期，一个经典的面向对象思想，强调的是方法和属性。\",\n \"categories\": [\"code\"],\n \"tags\": [\"react\", \"hooks\", \"技巧\", \"思考\", \"功能\"],\n \"banner\": \"./banner.jpg\",\n \"bannerCredit\": \"Banner from [React Hooks](https://www.framer.com/blog/posts/react-hooks/)\",\n \"tips\": [\"原来 Hooks 这么特别啊！\", \"我们不一样，每个用法都有不同的场景。\"]\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst CodeWithPreview = makeShortcode(\"CodeWithPreview\");\nconst layoutProps = {\n View,\n Counter,\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u5BF9 React-Hooks \\u8FD9\\u4E2A\\u65B0\\u529F\\u80FD\\u7684\\u601D\\u8003\\uFF0C\\u4E0D\\u4EC5\\u4EC5\\u662F\\u65B0\\u7684\\u63A5\\u53E3\\uFF0C\\u91CD\\u8981\\u7684\\u662F\\u8FD9\\u79CD\\u5F00\\u53D1\\u6A21\\u5F0F\\u4EE3\\u8868\\u7684\\u903B\\u8F91\\u7684\\u62C6\\u5206\\uFF0C\\u72B6\\u6001\\u548C\\u526F\\u4F5C\\u7528\\u7684\\u601D\\u7EF4\\u65B9\\u5F0F\\uFF0C\\u800C\\u4E0D\\u662F\\u751F\\u547D\\u5468\\u671F~~\")), mdx(\"hr\", null), mdx(\"p\", null, \"Hooks \\u6982\\u5FF5\\u521A\\u51FA\\u6765\\u7684\\u65F6\\u5019\\u5C31\\u770B\\u4E86\\u53D1\\u5E03\\u4F1A\\u7684 Presentation\\uFF0C\\u5F53\\u65F6\\u611F\\u89C9\\u601D\\u60F3\\u7279\\u522B\\u597D\\uFF0C\\u80FD\\u591F\\u5728\\u4E00\\u4E2A\\u51FD\\u6570\\u91CC\\u9762\\u5C31\\u53EF\\u4EE5\\u5BF9\\u6570\\u636E\\u548C\\u751F\\u547D\\u5468\\u671F\\u8FDB\\u884C\\u7BA1\\u7406\\u3002\"), mdx(\"p\", null, \"\\u800C\\u4E14\\u5BF9\\u4E8E\\u4ECE prototype \\u8FC7\\u6765\\u7684\\u539F\\u578B\\u7EE7\\u627F\\uFF0C\\u4E00\\u76F4\\u89C9\\u5F97\\u867D\\u7136 Class \\u5F88\\u597D\\u7528\\uFF0C\\u4F46\\u662F\\u592A\\u91CD\\u91CF\\u4E86\\uFF0C\\u4E00\\u4E2A\\u5F88\\u7B80\\u5355\\u7684\\u7EC4\\u4EF6\\u53EA\\u8981\\u6D89\\u53CA\\u5230\\u5185\\u90E8\\u72B6\\u6001\\u5C31\\u8981\\u6709 Class\\uFF0C\\u6240\\u4EE5 Hooks \\u53D1\\u5E03\\u4E4B\\u540E\\u5F88\\u957F\\u4E00\\u6BB5\\u65F6\\u95F4\\u6211\\u90FD\\u662F\\u4EE5\\u4E3A\\u8981\\u66FF\\u4EE3 Class \\u7EC4\\u4EF6\\uFF0C\\u81F3\\u5C11\\u5927\\u90E8\\u5206\\u573A\\u666F\\u53EF\\u4EE5\\u7528 Hooks \\u91CD\\u5199\\u3002\"), mdx(\"p\", null, \"\\u5728\\u4F7F\\u7528\\u4E86\\u4E24\\u4E09\\u4E2A\\u6708\\u4E4B\\u540E\\uFF0C\\u4E0D\\u7528 Hooks \\u4E0D\\u8212\\u670D\\u65AF\\u57FA\\u4E5F\\u8E29\\u4E86\\u5F88\\u591A\\u5751\\uFF0C\\u6211\\u73B0\\u5728\\u624D\\u987F\\u609F\\u8FC7\\u6765\\uFF0C\\u5176\\u5B9E Hooks \\u4E0D\\u4EC5\\u4EC5\\u662F\\u770B\\u4E0A\\u53BB\\u8FD9\\u4E48\\u7B80\\u5355\\uFF0C\\u4E5F\\u4E0D\\u662F\\u4EC5\\u4EC5\\u7528\\u6765\\u53D6\\u4EE3 Class \\u7684\\uFF0C\\u800C\\u662F\\u4E00\\u4E2A\\u4E0D\\u4E00\\u6837\\u7684\\u7EC4\\u4EF6\\u601D\\u60F3\\u3002\"), mdx(\"h2\", null, \"0. \\u6CA1\\u6709 Hooks \\u7684\\u65E5\\u5B50\\u91CC\"), mdx(\"p\", null, \"\\u6211\\u60F3\\u8981\\u5F00\\u53D1\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u5173\\u6CE8\\u7EC4\\u4EF6\"), mdx(\"style\", null, styleStr), mdx(CodeWithPreview, {\n codes: [{\n lang: 'jsx',\n code: code1\n }, {\n lang: 'jsx',\n code: \"\\n\\n\"\n }, {\n lang: 'css',\n code: \"/* === css style === */\"\n }],\n withTitle: true,\n preview: mdx(\"div\", null, mdx(Follow, {\n followed: true,\n mdxType: \"Follow\"\n }), mdx(\"br\", null), mdx(Follow, {\n followed: false,\n mdxType: \"Follow\"\n })),\n mdxType: \"CodeWithPreview\"\n }), mdx(\"p\", null, \"\\u8FD9\\u6837\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u4E0D\\u53EF\\u80FD\\u662F\\u7B80\\u5355\\u7684\\u5C55\\u793A\\uFF0C\\u5FC5\\u5B9A\\u9700\\u8981\\u4E00\\u4E9B\\u4EA4\\u4E92\\uFF0C\\u4F46\\u662F props \\u7684\\u5355\\u5411\\u66F4\\u65B0\\u6CA1\\u529E\\u6CD5\\u5B9E\\u73B0\\u7075\\u6D3B\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\uFF0C\\u6240\\u4EE5\\u5FC5\\u987B\\u8981\\u5C06\\u8FD9\\u4E2A\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u6539\\u6210 class \\u7684\\uFF0C\\u540C\\u65F6\\u8003\\u8651\\u5230\\u4E1A\\u52A1\\u590D\\u6742\\u6027\\uFF0C\\u6DFB\\u52A0\\u4E86\\u6570\\u636E\\u7684\\u521D\\u59CB\\u5316\\u3001\\u8BA2\\u9605\\u3001\\u66F4\\u65B0\\u7B49\\u751F\\u547D\\u5468\\u671F\\u7B49\\uFF0C\\u6700\\u7EC8\\u5B9E\\u73B0\\uFF1A\"), mdx(Demo2, {\n mdxType: \"Demo2\"\n }), mdx(\"p\", null, \"\\u73B0\\u5728\\u6211\\u4EEC\\u5C31\\u6709\\u4E00\\u4E2A\\u53EF\\u4EA4\\u4E92\\u7EC4\\u4EF6\\u4E86\\uFF0C\\u903B\\u8F91\\u7B97\\u662F\\u5F88\\u6E05\\u6670\\u3002\\u4E5F\\u5F88\\u660E\\u663E\\u7684\\u5F97\\u51FA\\u7ED3\\u8BBA\\uFF0C\\u5982\\u679C\\u9700\\u8981\\u5185\\u5BB9\\u5C55\\u793A\\uFF0C\\u4F7F\\u7528\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\uFF0C\\u5982\\u679C\\u60F3\\u8981\\u4EA4\\u4E92\\uFF0C\\u5C31\\u5FC5\\u987B\\u6539\\u5199\\u6210\\u4E00\\u4E2A class \\u7EC4\\u4EF6\\u3002\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"function \\u7EC4\\u4EF6\\u7B80\\u5355\\u7EAF\\u7CB9\\uFF0C\\u53EA\\u6709\\u4E00\\u4E2A\\u8F93\\u5165\\u8F93\\u51FA\\uFF0C\\u65E0\\u72B6\\u6001\\u7684\\u5F00\\u53D1\\u6A21\\u5F0F\\uFF0C\\u786E\\u5B9A\\u7684\\u8F93\\u5165\\u4E00\\u5B9A\\u6709\\u786E\\u5B9A\\u7684\\u8F93\\u51FA\\uFF0C\\u5F53\\u65F6\\u4E5F\\u88AB\\u79F0\\u4E3A SFC\\uFF08stateless functional component\\uFF09\\u3002\\u6240\\u4EE5\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u5982\\u679C\\u4F7F\\u7528\\u51FD\\u6570\\u5F0F\\uFF0C\\u9664\\u975E\\u7236\\u7EC4\\u4EF6\\u6539\\u53D8\\u8F93\\u5165\\uFF0C\\u5426\\u5219\\u4E00\\u5B9A\\u6CA1\\u529E\\u6CD5\\u5B9E\\u73B0\\u754C\\u9762\\u6539\\u53D8\\u3002\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"class \\u7684\\u7EC4\\u4EF6\\u6709\\u81EA\\u5DF1\\u7684\\u751F\\u547D\\u5468\\u671F\\uFF0C\\u53EF\\u4EE5\\u7EF4\\u62A4\\u81EA\\u5DF1\\u7684\\u72B6\\u6001\\uFF0C\\u7236\\u7EC4\\u4EF6\\u7684\\u8F93\\u5165\\u65E0\\u6CD5\\u552F\\u4E00\\u786E\\u5B9A\\u7EC4\\u4EF6\\u7684\\u7ED3\\u679C\\uFF0C\\u7EC4\\u4EF6\\u7684\\u529F\\u80FD\\u66F4\\u72EC\\u7ACB\\u7075\\u6D3B\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u72B6\\u6001\\u3001\\u65B9\\u6CD5\\u548C\\u4E8B\\u4EF6\\u6765\\u5B8C\\u6210\\u7528\\u6237\\u7684\\u4EA4\\u4E92\\uFF0C\\u5BF9\\u4E8E\\u7236\\u7EC4\\u4EF6\\u5185\\u90E8\\u903B\\u8F91\\u90FD\\u662F\\u9ED1\\u76D2\\u3002\"))), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u5C31\\u662F React \\u5F00\\u53D1\\u8005\\u5728\\u4E00\\u6BB5\\u65F6\\u95F4\\u540E\\u90FD\\u4F1A\\u6709\\u7684\\u601D\\u8003\\u3002\"), mdx(\"h2\", null, \"1. \\u6570\\u636E\\u3001\\u72B6\\u6001\\u3001\\u5BB9\\u5668\\u7EC4\\u4EF6 VS \\u6E32\\u67D3\\u3001\\u6837\\u5F0F\\u3001\\u5C55\\u793A\\u7EC4\\u4EF6\"), mdx(\"p\", null, \"\\u51E0\\u4E4E\\u6240\\u6709\\u7684\\u6700\\u4F73\\u5B9E\\u8DF5\\u90FD\\u5728\\u8BF4\\u7EC4\\u4EF6\\u4E0A\\u9700\\u8981\\u6709\\u660E\\u786E\\u7684\\u72B6\\u6001\\u548C\\u5E72\\u51C0\\u7684\\u6E32\\u67D3\\uFF0C\\u6570\\u636E\\u548C\\u6E32\\u67D3\\u5206\\u79BB\\uFF0C\\u83B7\\u53D6\\u3001\\u5904\\u7406\\u3001\\u66F4\\u65B0\\u6570\\u636E\\u4E4B\\u540E\\u518D\\u8C03\\u7528\\u7EAF\\u6E32\\u67D3\\u7EC4\\u4EF6\\u5C55\\u793A\\u3002\\u8FD9\\u4E5F\\u662F\\u6570\\u636E\\u7BA1\\u7406\\u3001\\u72B6\\u6001\\u7BA1\\u7406\\u5C42\\u529F\\u80FD\\u5728 react \\u751A\\u81F3\\u6240\\u6709\\u4E2D\\u5927\\u578B\\u5E94\\u7528\\u7684\\u5F00\\u53D1\\u8FC7\\u7A0B\\u4E2D\\u6709\\u5F88\\u5927\\u5206\\u91CF\\u7684\\u539F\\u56E0\\uFF0C\\u4E5F\\u80FD\\u4ECE\\u903B\\u8F91\\u4E0A\\u66F4\\u597D\\u7684\\u62BD\\u8C61\\u548C\\u590D\\u7528\\u4EE3\\u7801\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u4F18\\u79C0\\u7684\\u56E2\\u961F\\u6CA1\\u90A3\\u4E48\\u591A\\uFF0C\\u66F4\\u6CA1\\u90A3\\u4E48\\u591A\\u9AD8\\u8D28\\u91CF\\u7684\\u4F18\\u96C5\\u5B9E\\u73B0\\uFF0C\\u6570\\u636E\\u7684\\u6D41\\u8F6C\\u548C\\u7EC4\\u4EF6\\u8BBE\\u8BA1\\u5E76\\u6CA1\\u6709\\u90A3\\u4E48\\u8FFD\\u6C42\\u5B8C\\u7F8E\\uFF0C\\u73B0\\u72B6\\u662F\\u5F88\\u591A\\u4E1A\\u52A1\\u4E2D\\u7EC4\\u4EF6\\u7684\\u5B9E\\u8DF5\\u5F88\\u591A\\u53D8\\u6210\\u4E86\\uFF1A\"), mdx(\"h3\", null, \"1.1 \\u72B6\\u6001\\u7BA1\\u7406 -> \\u4E1A\\u52A1\\u81F3\\u4E0A\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \" \\u72B6\\u6001\\u7BA1\\u7406 \"), \" \\u4ECE\\u7EC4\\u4EF6\\u7684\\u6A21\\u5F0F\\u6765\\u8BF4\\uFF0Cclass \\u548C function \\u4EE3\\u8868\\u7740\\u4E24\\u79CD\\u4E0D\\u540C\\u7684\\u5F00\\u53D1\\u4F53\\u9A8C\\uFF0C\\u6309\\u7167\\u6211\\u7684\\u7406\\u89E3\\u5C31\\u662F\\u5E26\\u590D\\u6742\\u72B6\\u6001\\u7BA1\\u7406\\u7684\\u7EC4\\u4EF6\\uFF0C\\u548C\\u7EAF\\u5C55\\u793A\\u578B\\u7EC4\\u4EF6\\u3002\"), mdx(\"p\", null, \"React \\u5C06\\u72B6\\u6001\\u7BA1\\u7406\\u7684\\u65B9\\u6848\\u6254\\u7ED9\\u4E86\\u793E\\u533A\\uFF0C\\u793E\\u533A\\u8BDE\\u751F\\u4E86\\u975E\\u5E38\\u591A\\u7684\\u4F18\\u79C0\\u65B9\\u6848\\uFF0C\\u6BD4\\u5982 Redux\\u3001Mobx \\u7B49\\uFF0C\\u72B6\\u6001\\u5171\\u4EAB\\u548C\\u5206\\u53D1\\u8BA9\\u72B6\\u6001\\u7BA1\\u7406\\u8DB3\\u4EE5\\u6491\\u8D77\\u5927\\u578B\\u5E94\\u7528\\u7684\\u5F00\\u53D1\\u3002\"), mdx(\"p\", null, \"\\u7406\\u60F3\\u5F88\\u4E30\\u6EE1\\uFF0C\\u4F46\\u662F\\u73B0\\u5B9E\\u975E\\u5E38\\u9AA8\\u5E72\\uFF0C\\u6709\\u5F3A\\u8FEB\\u75C7\\u7684\\u5F00\\u53D1\\u8005\\u6CA1\\u90A3\\u4E48\\u591A\\uFF0C\\u4F46\\u662F\\u7740\\u6025\\u50AC\\u4EBA\\u547D\\u7684\\u8001\\u677F\\u5F88\\u591A\\uFF0C\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u5F88\\u591A\\u7684\\u4EA4\\u4E92\\u529F\\u80FD\\u3001\\u6570\\u636E\\u83B7\\u53D6\\u529F\\u80FD\\u90FD\\u4E00\\u80A1\\u8111\\u7684\\u653E\\u5230 class \\u7EC4\\u4EF6\\u91CC\\uFF0C\\u751F\\u547D\\u5468\\u671F\\u5206\\u5272\\u5F00\\u7684\\u5404\\u79CD\\u903B\\u8F91\\u53D8\\u6210\\u4E86\\u4E00\\u56E2\\u9EBB\\uFF0C\\u6CA1\\u6709\\u65F6\\u95F4\\u6216\\u8005\\u521D\\u671F\\u6CA1\\u6CD5\\u53BB\\u5B9E\\u73B0\\u6700\\u4F73\\u5B9E\\u8DF5\\uFF0C\\u540E\\u671F\\u66F4\\u6CA1\\u6CD5\\u62BD\\u8C61\\u66F4\\u7EC6\\u7C92\\u5EA6\\u7684\\u4EE3\\u7801\\u91CD\\u7528\\uFF0C\\u56F4\\u7ED5\\u7740\\u6846\\u67B6\\u7684\\u751F\\u547D\\u5468\\u671F\\u3001state\\u7684\\u5904\\u7406\\u4EE3\\u7801\\u5230\\u5904\\u90FD\\u662F\\u3002\\u5373\\u4F7F function \\u7EC4\\u4EF6\\u7B80\\u5355\\u7EAF\\u7CB9\\uFF0C\\u53EA\\u6709\\u4E00\\u4E2A\\u8F93\\u5165\\u8F93\\u51FA\\uFF0C\\u4F46\\u662F\\u4E00\\u65E6\\u9700\\u6C42\\u53D8\\u66F4\\uFF0C\\u6216\\u8005\\u9700\\u8981\\u4EA4\\u4E92\\uFF0C\\u5F88\\u5FEB\\u5C31\\u5FC5\\u987B\\u6539\\u5199\\u6210 class \\u7C7B\\u578B\\u4E86\\u3002\"), mdx(\"h3\", null, \"1.2 \\u4EE3\\u7801\\u590D\\u7528 -> \\u903B\\u8F91\\u5206\\u5272\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \" \\u4EE3\\u7801\\u590D\\u7528 \"), \" \\u4ECE\\u4EE3\\u7801\\u72B6\\u6001\\u903B\\u8F91\\u590D\\u7528\\u4E0A\\u6765\\u8BF4\\uFF0CHoC \\u9AD8\\u9636\\u7EC4\\u4EF6\\u548C Render props \\u6280\\u672F\\u5F00\\u53D1\\u6A21\\u5F0F\\u4E00\\u822C\\u7528\\u7684\\u6BD4\\u8F83\\u591A\\u3002\"), mdx(\"p\", null, \"\\u53EA\\u6709 class \\u548C function \\u7684\\u4F7F\\u7528\\u4F53\\u9A8C\\uFF0C\\u5F88\\u591A\\u65F6\\u5019\\u5ACC\\u5F03 class \\u7B28\\u91CD\\u3001\\u8BA8\\u538C function \\u6CA1\\u7528\\u7684\\u4F53\\u9A8C\\uFF0C\\u4F46\\u662F\\u6BD5\\u7ADF\\u8FD9\\u51E0\\u79CD\\u5F00\\u53D1\\u6A21\\u5F0F\\u90FD\\u6709\\u72EC\\u7279\\u7684\\u573A\\u666F\\u9700\\u6C42\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u5927\\u90E8\\u5206\\u5F00\\u53D1\\u4EBA\\u5458\\u6CA1\\u529E\\u6CD5\\u505A\\u5230\\u6E32\\u67D3\\u548C\\u72B6\\u6001\\u7684\\u5206\\u79BB\\uFF0C\\u5DE5\\u4F5C\\u73AF\\u5883\\u662F\\u4E1A\\u52A1\\u800C\\u4E0D\\u662F\\u6846\\u67B6\\uFF0C\\u6240\\u4EE5\\u5FEB\\u901F\\u5B9E\\u73B0\\u4E1A\\u52A1\\u7684\\u65F6\\u5019\\uFF0C\\u5F88\\u96BE\\u505A\\u597D\\u4E1A\\u52A1\\u7684\\u68B3\\u7406\\uFF0C\\u5C31\\u51FA\\u73B0\\u4E86\\u5927\\u91CF\\u4F7F\\u7528 class \\u7EC4\\u4EF6\\uFF0C\\u5728\\u751F\\u547D\\u5468\\u671F\\u4E2D\\u505A\\u5F88\\u591A\\u903B\\u8F91\\u5904\\u7406\\u3002\"), mdx(\"p\", null, \"\\u7528\\u5F97\\u591A\\u4E86\\u540E\\u624D\\u53D1\\u73B0\\u5F88\\u591A\\u5730\\u65B9\\u4E5F\\u5E76\\u4E0D\\u5C3D\\u5982\\u4EBA\\u610F\\uFF0C\\u53EF\\u80FD\\u4E5F\\u662F\\u80FD\\u529B\\u95EE\\u9898\\u6216\\u8005\\u6CA1\\u6709\\u65F6\\u95F4\\u6765\\u62BD\\u8C61\\uFF0C\\u6BD4\\u5982 class \\u7EC4\\u5EFA\\u4E2D\\u4E25\\u683C\\u7684\\u751F\\u547D\\u5468\\u671F\\u7ECF\\u5E38\\u628A\\u903B\\u8F91\\u4EE3\\u7801\\u5206\\u5272\\u5F00\\uFF0C\\u6BCF\\u4E2A\\u9636\\u6BB5\\u7684\\u72B6\\u6001\\u903B\\u8F91\\u53D8\\u66F4\\uFF0C\\u590D\\u6742\\u7EC4\\u4EF6\\u4F1A\\u53D8\\u5F97\\u5F88\\u6DF7\\u4E71\\u5F88\\u96BE\\u62C6\\u5206\\u3002function \\u7EC4\\u4EF6\\u7ECF\\u5E38\\u505A\\u7B80\\u5355\\u7EC4\\u4EF6\\uFF0C\\u4F46\\u662F\\u4E00\\u65E6\\u9700\\u6C42\\u53D8\\u66F4\\uFF0C\\u6216\\u8005\\u9700\\u8981\\u4EA4\\u4E92\\uFF0C\\u5F88\\u5FEB\\u5C31\\u5FC5\\u987B\\u6539\\u5199\\u6210 class \\u7C7B\\u578B\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u5176\\u5B9E\\u4E0A\\u9762\\u7684\\u4E0D\\u53CB\\u597D\\u7684\\u5730\\u65B9\\u4E5F\\u4E0D\\u662F\\u90A3\\u4E48\\u5938\\u5F20\\uFF0C\\u4F46\\u662F Hooks \\u51FA\\u73B0\\u786E\\u5B9E\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u53EF\\u80FD\\u66F4\\u597D\\u7684\\u65B9\\u6848\\uFF0C\\u4E1A\\u52A1\\u5C42\\u6709\\u4E86\\u4E00\\u4E2A\\u7075\\u6D3B\\u8FD8\\u53C8\\u5F3A\\u5927\\u7684\\u6A21\\u5F0F\\u3002\"), mdx(\"h2\", null, \"2. Hooks \\u51FA\\u73B0\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Hooks \\u7684\\u51FA\\u73B0\\u8BA9 function \\u7EC4\\u4EF6\\u4ECE\\u6570\\u636E\\u8F93\\u5165\\u5230\\u89C6\\u56FE\\u8F93\\u51FA\\u7684\\u6A21\\u5F0F\\u53D8\\u6210\\u4E86\\u6709\\u72B6\\u6001\\u903B\\u8F91\\u7684\\u7EC4\\u4EF6\\u3002\")), mdx(\"p\", null, \"\\u65E0\\u72B6\\u6001\\u8868\\u73B0\\u662F\\u8F93\\u5165\\u76F8\\u540C\\uFF0C\\u8F93\\u51FA\\u5C31\\u76F8\\u540C\\u3002\\u539F\\u672C\\u7684 function \\u7EC4\\u4EF6\\uFF0C\\u8F93\\u5165\\u53EF\\u4EE5\\u6307 props \\u8F93\\u51FA\\u662F \\u89C6\\u56FE UI\\u3002\\n\\u73B0\\u5728\\u589E\\u52A0 Hooks\\uFF0C\\u5B9E\\u9645\\u4E0A\\u7EC4\\u4EF6\\u5185\\u90E8\\u7EF4\\u62A4\\u4E86\\u4E00\\u4E2A\\u72B6\\u6001\\uFF0C\\u53EF\\u80FD props \\u4E0D\\u4FEE\\u6539\\uFF0C\\u89C6\\u56FE UI \\u4E5F\\u4F1A\\u53D8\\u52A8\\uFF0C\\u4F46\\u662F\\u6BCF\\u6B21\\u4F7F\\u7528\\u76F8\\u540C\\u7684 props \\u6E32\\u67D3\\u51FA\\u6765\\u7684\\u89C6\\u56FEUI\\u8868\\u73B0\\u548C\\u72B6\\u6001\\u90FD\\u662F\\u80FD\\u786E\\u5B9A\\u7684\"), mdx(\"p\", null, \"Hooks \\u7684\\u51FA\\u73B0\\u4E00\\u4E2A\\u662F\\u589E\\u52A0\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D\\u72B6\\u6001\\u7BA1\\u7406\\u7684\\u53EF\\u80FD\\u6027\\uFF0C\\u800C\\u4E14\\u8FD8\\u80FD\\u63D0\\u4F9B\\u4E00\\u4E2A\\u66F4\\u7EC6\\u7C92\\u5EA6\\u7684\\u903B\\u8F91\\u590D\\u7528\\u3002\"), mdx(\"p\", null, \"\\u518D\\u6B21\\u5C06\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u5C01\\u88C5\\u51FA\\u6765\\u7684\\u7ED3\\u679C\\u975E\\u5E38\\u6E05\\u723D\\uFF0C\\u4E0D\\u7528\\u5173\\u5FC3\\u751F\\u547D\\u5468\\u671F\\uFF0C\\u53EA\\u9700\\u8981\\u5173\\u5FC3\\u72B6\\u6001\\u548C\\u6539\\u53D8\\u72B6\\u6001\\u7684\\u884C\\u4E3A\\uFF1A\"), mdx(Demo3, {\n mdxType: \"Demo3\"\n }), mdx(\"h3\", null, \"2.1 \\u5168\\u65B0\\u7684\\u601D\\u7EF4\"), mdx(\"p\", null, \"\\u5728 Hooks \\u53D1\\u5E03\\u7B2C\\u4E00\\u65F6\\u95F4\\u4E4B\\u540E\\uFF0C\\u6211\\u89C9\\u5F97\\u8FD9\\u4E2A\\u5F62\\u5F0F\\u662F\\u7F16\\u7A0B\\u4E60\\u60EF\\u4E0A\\u7684\\u95EE\\u9898\\uFF0C\\u7231\\u7528 Class \\u5C31\\u7528\\uFF0C\\u7231\\u7528 hooks \\u4E5F\\u53EF\\u4EE5\\uFF0C\\u53EA\\u8981\\u4E1A\\u52A1\\u4E2D\\u7EDF\\u4E00\\u5373\\u53EF\\u3002\\u6240\\u4EE5\\u5927\\u6982\\u62FF\\u4E86\\u51E0\\u4E2A class \\u7EC4\\u4EF6\\u8F6C\\u6210 hooks \\u4E4B\\u540E\\uFF0C\\u4E5F\\u6CA1\\u89C9\\u5F97\\u6709\\u4EC0\\u4E48\\u5927\\u4E0D\\u4E86\\u7684\\uFF0C\\u751A\\u81F3\\u8FD8\\u89C9\\u5F97\\u90A3\\u4E9B use-* \\u6709\\u70B9\\u4E0D\\u77E5\\u6240\\u4E91\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u7528\\u7684\\u591A\\u4E86\\u4E4B\\u540E\\u53D1\\u73B0\\uFF0C\\u597D\\u50CF\\u5E76\\u4E0D\\u662F\\u8FD9\\u6837\\u7684\\uFF0Chooks \\u4E0D\\u4EC5\\u4EC5\\u662F\\u5B9E\\u73B0\\u4E86\\u529F\\u80FD\\uFF0C\\u8FD8\\u6084\\u9ED8\\u9ED8\\u7684\\u628A\\u6211\\u5BF9\\u7EC4\\u4EF6\\u7684\\u8BA4\\u77E5\\u6539\\u53D8\\u4E86\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u4E4B\\u524D\"), \" \\u6211\\u4EE5\\u4E3A\\u7684\\u7EC4\\u4EF6\\u662F\\u72B6\\u6001\\u52A0\\u751F\\u547D\\u5468\\u671F\\u7684\\u4FEE\\u6539\\u72B6\\u6001\\uFF0C\\u6709\\u4EC0\\u4E48\\u72B6\\u6001\\u6E32\\u67D3\\u4EC0\\u4E48\\u754C\\u9762\\uFF0C\\u7136\\u540E\\u5728\\u751F\\u547D\\u5468\\u671F\\u4E2D\\u5BF9\\u72B6\\u6001\\u8FDB\\u884C\\u6539\\u53D8\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u73B0\\u5728\"), \" \\u5173\\u5FC3\\u54EA\\u4E9B\\u662F\\u72B6\\u6001\\uFF0C\\u6709\\u54EA\\u4E9B\\u662F\\u526F\\u4F5C\\u7528\\uFF0C\\u6709\\u54EA\\u4E9B\\u662F\\u8BA1\\u7B97\\u548C\\u6E32\\u67D3\\uFF0C\\u4E0D\\u9700\\u8981\\u5173\\u5FC3\\u6211\\u4EC0\\u4E48\\u65F6\\u5019\\u624D\\u80FD\\u505A\\u54EA\\u4E9B\\u4E8B\\u3002\"), mdx(\"h3\", null, \"2.2 \\u6E10\\u5165\\u4F73\\u5883\"), mdx(\"p\", null, \"\\u7406\\u89E3\\u4E86 hooks \\u4E4B\\u540E\\uFF0C\\u5BF9\\u90A3\\u4E9B\\u4EE5 use-* \\u6A21\\u5F0F\\u7684\\u65B9\\u6CD5\\u540D\\u4E5F\\u662F\\u559C\\u6B22\\u5F97\\u7D27\\uFF0C\\u7B80\\u76F4\\u4F20\\u795E\\uFF0C\\u9700\\u8981\\u4EC0\\u4E48\\u6A21\\u5F0F\\u3001\\u529F\\u80FD\\u3001\\u6269\\u5C55\\u3001\\u6570\\u636E\\uFF0C\\u5C01\\u88C5\\u4E00\\u4E2A use \\u65B9\\u6CD5\\uFF0C\\u76F4\\u63A5\\u8C03\\u7528\\u5373\\u53EF\\uFF0C\\u72B6\\u6001\\u548C\\u4FEE\\u6539\\u72B6\\u6001\\u7684\\u65B9\\u6CD5\\u80FD\\u591F\\u62BD\\u8C61\\u7684\\u5F88\\u5E72\\u51C0\\uFF0C\\u5404\\u79CD\\u903B\\u8F91\\u90FD\\u96C6\\u6210\\u5728\\u4E00\\u8D77\\u800C\\u4E0D\\u662F\\u62C6\\u5206\\u5230\\u5404\\u4E2A\\u751F\\u547D\\u5468\\u671F\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\u6700\\u7B80\\u5355\\u76F4\\u63A5\\u7684\\u5C31\\u662F\\u5728\\u9700\\u8981\\u7B80\\u5355\\u6570\\u636E\\u4EA4\\u4E92\\u7684\\u5730\\u65B9\\u4F7F\\u7528 useState \\u4E86\\uFF1A\"), mdx(\"hr\", {\n style: {\n margin: '20px 0'\n }\n }), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"const View = () => {\\n let [count, setCount] = React.useState(0)\\n return \\n}\\n\")), mdx(CodeWithPreview, {\n withTitle: true,\n preview: mdx(View, {\n mdxType: \"View\"\n }),\n mdxType: \"CodeWithPreview\"\n }), mdx(\"br\", null), mdx(\"br\", null), mdx(\"p\", null, \"\\u7B80\\u5355\\u4E24\\u884C\\u7684\\u51FD\\u6570\\uFF0C\\u5C31\\u53EF\\u4EE5\\u5C01\\u88C5\\u6210\\u539F\\u672C\\u9700\\u8981 class \\u624D\\u80FD\\u5B8C\\u6210\\u7684\\u529F\\u80FD\\u4E86\\uFF0C\\u800C\\u4E14\\u5F88\\u597D\\u7684\\u5C01\\u88C5\\u4E86\\u903B\\u8F91\\u5B9E\\u73B0\\uFF0C\\u5F88\\u597D\\u7528\\uFF0C\\u6BD4\\u5982\\u4F7F\\u7528\\u6211\\u81EA\\u5DF1\\u5C01\\u88C5\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\u6846\\u67B6 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/studio/novus\"\n }, \"novus\"), \"\\uFF1A\"), mdx(CodeWithPreview, {\n column: true,\n codes: [{\n lang: \"ts\",\n code: novus_hooks_novusCodeStr2\n }],\n withTitle: true,\n preview: mdx(ExampleTodoExample, {\n mdxType: \"ExampleTodoExample\"\n }),\n mdxType: \"CodeWithPreview\"\n }), mdx(\"p\", null, \"\\u72B6\\u6001\\u548C\\u6539\\u53D8\\u72B6\\u6001\\u7684\\u884C\\u4E3A\\uFF0C\\u8FD8\\u662F\\u975E\\u5E38\\u6709\\u52A9\\u4E8E\\u7A0B\\u5E8F\\u7684\\u62BD\\u8C61\\u903B\\u8F91\\u7684\\u3002\"), mdx(\"h2\", null, \"4. \\u4ECE useCallback \\u548C deps \\u6765\\u770B\\u4E0D\\u540C\\u7684\\u7EC4\\u4EF6\\u601D\\u7EF4\\u65B9\\u5F0F\\u548C\\u6027\\u80FD\\u4F18\\u5316\\uFF0C\\u4EE5\\u53CA\\u95ED\\u5305\\u7684\\u80FD\\u529B\"), mdx(\"p\", null, \"\\u5148\\u770B\\u4E00\\u4E2A\\u5C0F\\u6817\\u5B50\\uFF1A\"), mdx(CodeWithPreview, {\n codes: [{\n lang: 'jsx',\n code: \"function Counter() {\\n const [count, setCount] = useState(0);\\n useEffect(() => {\\n const id = setInterval(() => {\\n setCount(count + 1); // \\u8FD9\\u4E2A\\u526F\\u4F5C\\u7528\\u8BA1\\u7B97\\u4F9D\\u8D56\\u4E8E count \\u7684\\u503C\\n }, 1000);\\n return () => clearInterval(id);\\n }, []); // \\uD83D\\uDD34 Bug: \\u4F46\\u662F\\u5728\\u5E76\\u6CA1\\u6709\\u8BBE\\u7F6E\\u8FD9\\u4E2A\\u4F9D\\u8D56\\n return
{count}
;\\n}\"\n }],\n withTitle: true,\n column: true,\n preview: mdx(\"div\", null, \"\\u672C\\u5E94\\u8BE5\\u6BCF\\u79D2 +1 \\u7684\\u503C\\uFF1A\", mdx(Counter, {\n mdxType: \"Counter\"\n })),\n mdxType: \"CodeWithPreview\"\n }), mdx(\"p\", null, \"\\u5C0F\\u670B\\u53CB\\u4F60\\u662F\\u5426\\u6709\\u5F88\\u591A\\u95EE\\u53F7\\uFF1F\\u4E3A\\u4EC0\\u4E48\\u754C\\u9762\\u7684\\u503C\\u4E00\\u76F4\\u6CA1\\u6709\\u66F4\\u65B0\\u5462\\uFF1F\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"ps: \\u4E0A\\u9762\\u7684\\u5B9E\\u4F8B\\u4EC5\\u7528\\u6765\\u6F14\\u793A\\u4E3A\\u4EC0\\u4E48\\u8BA1\\u7B97\\u80FD\\u591F\\u88AB\\u7F13\\u5B58\\uFF0CuseCallback \\u4F9D\\u8D56\\u4E8E\\u6BCF\\u6B21\\u53D8\\u66F4\\u7684\\u72B6\\u6001\\u7684\\u8BDD\\uFF0C\\u4E5F\\u6CA1\\u4EC0\\u4E48\\u610F\\u4E49\\uFF0C\\u5F92\\u589E\\u8017\\u65F6\\u3002\")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u539F\\u56E0\\u5728\\u4E8E\\uFF0Ceffect / callback \\u6267\\u884C\\u7684\\u65F6\\u5019\\uFF0C\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u95ED\\u5305\\uFF0C\\u5185\\u90E8\\u5BF9 state \\u7684\\u8BBF\\u95EE\\u4F9D\\u8D56\\u4E8E\\u95ED\\u5305\\u4E2D\\u521D\\u59CB\\u7684\\u503C 0\\u3002deps \\u53C2\\u6570\\u8868\\u793A\\u6BCF\\u6B21 render \\u7684\\u65F6\\u5019\\u9700\\u8981\\u5224\\u65AD\\u4E0E\\u4E0A\\u6B21\\u7684\\u503C\\u8FDB\\u884C\\u6D45\\u6BD4\\u8F83\\uFF0C\\u5982\\u679C\\u6CA1\\u6709\\u53D8\\u52A8\\u5C31\\u4F1A\\u7F13\\u5B58\\u4E0A\\u6B21\\u7684\\u51FD\\u6570\\uFF0C\\u4E5F\\u5305\\u62EC\\u8FD9\\u4E2A\\u95ED\\u5305\\u5185\\u90E8\\u7684\\u4F20\\u503C\\u5F15\\u7528\\u3002\\u5982\\u679C deps \\u4E3A\\u7A7A\\uFF0C\\u8868\\u793A\\u4E0D\\u4F1A\\u66F4\\u65B0\\u8FD9\\u4E2A\\u95ED\\u5305\\uFF0C\\u5BFC\\u81F4\\u6BCF\\u6B21\\u6267\\u884C\\u51FD\\u6570\\u4E2D\\u7684\\u503C\\u4F1A\\u6C38\\u8FDC\\u662F\\u5F53\\u65F6\\u521D\\u59CB\\u5316\\u7684\\u503C\\u3002\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\"\n }, \"How to read an often-changing value from useCallback?\")), mdx(\"p\", null, \"\\u6B63\\u786E\\u7684\\u505A\\u6CD5\\u5E94\\u8BE5\\u662F\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts{6,9}\"\n }, \"function Counter() {\\n const [count, setCount] = useState(0);\\n\\n useEffect(() => {\\n const id = setInterval(() => {\\n setCount(c => c + 1); // \\u2705 \\u5728\\u8FD9\\u4E0D\\u4F9D\\u8D56\\u4E8E\\u5916\\u90E8\\u7684 `count` \\u53D8\\u91CF\\n }, 1000);\\n return () => clearInterval(id);\\n }, []); // \\u2705 \\u6211\\u4EEC\\u7684 effect \\u4E0D\\u4F7F\\u7528\\u7EC4\\u4EF6\\u4F5C\\u7528\\u57DF\\u4E2D\\u7684\\u4EFB\\u4F55\\u53D8\\u91CF\\uFF0C\\u8868\\u793A\\u53EA\\u4F1A\\u6267\\u884C\\u4E00\\u6B21\\n\\n return

{count}

;\\n}\\n\")), mdx(\"p\", null, \"\\u6240\\u4EE5 hooks \\u5728\\u6BCF\\u6B21\\u66F4\\u7EC6\\u4F60\\u90FD\\u4F1A\\u6267\\u884C\\u7684\\u51FD\\u6570\\u4F53\\u5185\\u600E\\u4E48\\u4FDD\\u5B58\\u72B6\\u6001\\u548C\\u51FD\\u6570\\u7684\\u5462\\uFF1F\\u7B54\\u6848\\u662F\\u4F7F\\u7528\\u4E86\\u95ED\\u5305\\u3002\\u4E0B\\u9762\\u7528\\u975E\\u5E38\\u7B80\\u5355\\u7684\\u5B9E\\u73B0\\u6765\\u6F14\\u793A\\u4E0B\\u4E00\\u4E2A\\u95ED\\u5305\\uFF1A\"), mdx(CodeWithPreview, {\n codes: [{\n lang: 'jsx',\n code: \"let cacheVal\\nfunction useState(initVal){\\n if (!cacheVal) cacheVal = initVal\\n function updateVal(newVal) {\\n cacheVal = newVal\\n }\\n return [cacheVal, updateVal]\\n}\\n\\nlet cacheFunc\\nfunction useEffect(func) {\\n if (!cacheFunc) {\\n cacheFunc = func\\n cacheFunc()\\n }\\n}\\n\\nfunction Counter() {\\n const [count, setCount] = useState(0);\\n useEffect(() => {\\n (() => {\\n setCount(count + 1);\\n })();\\n });\\n return count\\n}\\n\\nconsole.log(Counter()) // 0\\nconsole.log(Counter()) // 1\\nconsole.log(Counter()) // 1\\nconsole.log(Counter()) // 1\\nconsole.log(Counter()) // 1\"\n }],\n withTitle: true,\n mdxType: \"CodeWithPreview\"\n }), mdx(\"p\", null, \"\\u4E5F\\u5C31\\u662F\\u95ED\\u5305\\u5728\\u83B7\\u53D6\\u503C\\u7684\\u65F6\\u5019\\u5DF2\\u7ECF\\u5728\\u4E0A\\u4E0B\\u6587\\u73AF\\u5883\\u4E2D\\u7F13\\u5B58\\u4E86\\u8FD9\\u4E2A\\u503C\\uFF0C\\u518D\\u591A\\u6B21\\u8C03\\u7528\\u4E5F\\u6CA1\\u529E\\u6CD5\\u66F4\\u65B0\\uFF0C\\u8FD9\\u4E5F\\u662F hooks \\u7528\\u6765\\u7F13\\u5B58\\u8BA1\\u7B97\\u63D0\\u5347\\u6027\\u80FD\\u7684\\u4E00\\u4E2A\\u65B9\\u6848\\u3002\"), mdx(\"p\", null, \"\\u66F4\\u591A\\u7684 hooks \\u6027\\u80FD\\u548C react \\u6027\\u80FD\\u8C03\\u4F18\\u53EF\\u4EE5\\u5728\\u53E6\\u4E00\\u7BC7\\u6587\\u7AE0\\u4E2D\\u4E86\\u89E3\\uFF1A\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/react-pratice-and-performance\"\n }, \"\\uD83D\\uDCCA React \\u5B9E\\u8DF5\\u6280\\u5DE7\\u548C\\u6027\\u80FD\\u4F18\\u5316\")), mdx(\"h3\", null, \"\\u95ED\\u5305\\u539F\\u56E0\\u5BFC\\u81F4\\u7684\\u5F88\\u591A\\u5E38\\u89C1\\u95EE\\u9898\\uFF0C\\u5982\\u679C\\u4E0D\\u4E86\\u89E3\\u8FD9\\u4E2A\\u7279\\u6027\\uFF0C\\u6216\\u8005 use-* \\u505A\\u7684\\u5F88\\u590D\\u6742\\u4E4B\\u540E\\u5F88\\u53EF\\u80FD\\u4F1A\\u83AB\\u540D\\u5176\\u5999\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"const useSomeHook = () => {\\n\\n // \\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u72B6\\u6001\\n const [status, setStatus] = useState(false)\\n\\n // \\u5C01\\u88C5\\u7684\\u8BA1\\u7B97\\u903B\\u8F91\\uFF0C\\u91CC\\u9762\\u4F1A\\u4FEE\\u6539\\u72B6\\u6001\\n const someFunc = useCallback(() => {\\n\\n setStatus(!status)\\n\\n // \\u867D\\u7136\\u4E0A\\u9762\\u6709\\u66F4\\u65B0 state \\u503C\\uFF0C\\u4F46\\u662F\\u56E0\\u4E3A\\u6B64\\u5904\\u7684\\u503C\\u5F15\\u7528\\u662F\\u95ED\\u5305\\u4E2D\\u4E0A\\u6B21\\u7684\\u503C\\uFF0C\\u6240\\u4EE5\\u6CA1\\u529E\\u6CD5\\u83B7\\u5F97\\u7ACB\\u5373\\u7684\\u66F4\\u65B0\\u503C\\n // \\u5FC5\\u987B\\u7B49\\u518D\\u6B21\\u8C03\\u7528 someFunc = useCallback(...) \\u624D\\u80FD\\u8FD0\\u884C\\u65B0\\u751F\\u6210\\u7684\\u5305\\u542B\\u66F4\\u65B0\\u503C\\u7684\\u95ED\\u5305\\u51FD\\u6570\\n console.log('status => ', status) // false\\n\\n if(status) console.log('hello world!')\\n else console.log('hello react!') // \\u221A\\n\\n }, [status])\\n\\n useEffect(() => {\\n document.body.addEventListener('click', someFunc, false)\\n return () => {\\n document.body.removeEventListener('click', someFunc, false)\\n }\\n }, []) // \\u6B64\\u5904\\u6CA1\\u6709\\u4F9D\\u8D56\\uFF0C\\u6240\\u4EE5\\u70B9\\u51FB\\u4E8B\\u4EF6\\u6C38\\u8FDC\\u4F7F\\u7528\\u7684\\u662F\\u7B2C\\u4E00\\u6B21\\u7684 someFunc\\uFF0C\\u6240\\u4EE5\\u53EF\\u80FD\\u6C38\\u8FDC\\u4E5F\\u6CA1\\u529E\\u6CD5\\u62FF\\u5230\\u6B63\\u786E\\u7684 state\\uFF0C\\u5BFC\\u81F4\\u5185\\u90E8\\u4F7F\\u7528\\u7684 state \\u548C return \\u8F93\\u51FA\\u7684 state \\u4E0D\\u4E00\\u81F4\\u7684\\u60C5\\u51B5\\n\\n useEffect(() => {\\n\\n console.log(status) // false\\n setStatus(true)\\n console.log(status) // false\\n \\n // class \\u7EC4\\u4EF6\\u4E2D\\uFF0C\\u56E0\\u4E3A setState \\u662F\\u5F02\\u6B65\\u7684\\uFF0C\\u4E00\\u822C setTimeout \\u5728\\u4E0B\\u4E00\\u4E2A EventLoop \\u4E2D\\u80FD\\u591F\\u83B7\\u53D6\\u5230\\u66F4\\u65B0\\u503C\\n // \\u4F46\\u662F\\u8FD9\\u91CC\\u7684 status \\u56E0\\u4E3A\\u4E00\\u76F4\\u5F15\\u7528\\u7684\\u662F\\u95ED\\u5305\\u7684\\u503C\\uFF0C\\u662F\\u4E0D\\u4F1A\\u5728 1s \\u540E\\u66F4\\u65B0\\u7684\\n setTimeout(() => {\\n console.log(status) // false\\n }, 1000);\\n\\n }, [status])\\n\\n const loopFunc = useCallback(() => {\\n for (let i = 0; i < 5; i++) {\\n // \\u6B64\\u5904\\u867D\\u7136 useCallback \\u4F9D\\u8D56\\u4E86 someFunc\\uFF0C\\u4F46\\u662F\\u6BCF\\u6B21\\u5FAA\\u73AF\\u5185\\u90E8\\u90FD\\u662F\\u4F7F\\u7528\\u7684\\u95ED\\u5305\\u503C\\uFF0C\\u7B2C\\u4E00\\u6B21\\u5FAA\\u73AF\\u4E2D setState \\u4E5F\\u6CA1\\u529E\\u6CD5\\u518D\\u7B2C\\u4E8C\\u6B21\\u5FAA\\u73AF\\u5C31\\u770B\\u5230\\u66F4\\u65B0\\u540E\\u7684\\u503C\\n someFunc()\\n }\\n }, [someFunc])\\n\\n // !!!!! \\u5982\\u679C\\u4E00\\u4E2A\\u51FD\\u6570\\u672C\\u8EAB\\u5C31\\u9700\\u8981\\u4F9D\\u8D56\\u4E8E\\u9891\\u7E41\\u53D8\\u52A8\\u7684\\u72B6\\u6001\\uFF0C\\u90A3\\u4E48\\u4F7F\\u7528 use-* \\u4F18\\u5316\\u6027\\u80FD\\u672C\\u8EAB\\u4E5F\\u6CA1\\u529E\\u6CD5\\u505A\\u5230\\uFF0C\\u6700\\u597D\\u662F\\u628A\\u4E0D\\u4F9D\\u8D56\\u72B6\\u6001\\u7684\\u8BA1\\u7B97\\u90E8\\u5206\\u5265\\u79BB\\u5148\\n\\n return [status, someFunc, loopFunc]\\n}\\n\\n\")), mdx(\"h2\", null, \"5. \\u7ED3\\u8BBA\"), mdx(\"hr\", null), mdx(\"p\", null, \"hooks \\u7684\\u601D\\u60F3\\u662F\\u5F00\\u53D1\\u8005\\u4E0D\\u518D\\u9700\\u8981\\u53BB\\u7406\\u6E05\\u6BCF\\u4E00\\u4E2A\\u751F\\u547D\\u5468\\u671F\\u51FD\\u6570\\u7684\\u89E6\\u53D1\\u65F6\\u673A\\uFF0C\\u4EE5\\u53CA\\u5728\\u91CC\\u9762\\u5904\\u7406\\u903B\\u8F91\\u4F1A\\u6709\\u54EA\\u4E9B\\u5F71\\u54CD\\u3002\\u800C\\u662F\\u66F4\\u5173\\u6CE8\\u53BB\\u601D\\u8003\\u54EA\\u4E9B\\u662F\\u72B6\\u6001\\uFF0C\\u54EA\\u4E9B\\u662F\\u526F\\u4F5C\\u7528\\uFF0C\\u54EA\\u4E9B\\u662F\\u9700\\u8981\\u7F13\\u5B58\\u7684\\u590D\\u6742\\u8BA1\\u7B97\\u548C\\u4E0D\\u5FC5\\u8981\\u7684\\u6E32\\u67D3\\u3002\"), mdx(\"p\", null, \"class \\u66F4\\u504F\\u5411\\u7684\\u662F\\u6E05\\u6670\\u5B8C\\u6574\\u7684\\u751F\\u547D\\u5468\\u671F\\uFF0C\\u4E00\\u4E2A\\u7ECF\\u5178\\u7684\\u9762\\u5411\\u5BF9\\u8C61\\u601D\\u60F3\\uFF0C\\u5F3A\\u8C03\\u7684\\u662F\\u65B9\\u6CD5\\u548C\\u5C5E\\u6027\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}